Uncaught ReferenceError: process is not defined env variable

Question

I'm using vite and datocms as my backend. I followed the article on their site: https://www.datocms.com/cms/react-cms My code :

App.js

import About from './components/About.jsx'
import './App.css'

import { GraphQLClient, ClientContext } from 'graphql-hooks'

import.meta.env.DATO_API_TOKEN
import.meta.env.PREVIEW_MODE

const endpoint = process.env.PREVIEW_MODE ?
  'https://graphql.datocms.com/preview' :
  'https://graphql.datocms.com/';
const client = new GraphQLClient({ 
  url: endpoint,
  headers: {
    "Authorization": (process.env.DATO_API_TOKEN)
  } });

function App() {

  return (
    <>
      <ClientContext.Provider value={client}>
        <About />
      </ClientContext.Provider>
    </>
  )
}

export default App

The problem is I'm getting an error in the console which is the title of my post. My .env file only has REACT_APP_DATO_API_TOKEN. Is there anything I've done wrong?

Answer 1

You access env variables in vite apps like this

import.meta.env.VITE_DATO_API_TOKEN

You can also remove the REACT_APP_ from the start of the variable name if you want because that is only needed in create-react-app projects.