Uncaught ReferenceError: process未定义问题排查（Vite+DatoCMS场景）

错误原因 #

1. Vite 不支持 process.env，它使用 import.meta.env 来访问环境变量，直接写 process.env 会触发未定义错误。
2. Vite 要求环境变量必须以 VITE_ 为前缀才能被识别，你用的 REACT_APP_ 是 Create React App 的规则，Vite 不会加载这类变量。
3. 代码里那两行单独的 import.meta.env.DATO_API_TOKEN 和 import.meta.env.PREVIEW_MODE 没有实际作用，属于冗余代码。

修复步骤 #

1. 修改.env文件
   把里面的 REACT_APP_DATO_API_TOKEN 改成 VITE_DATO_API_TOKEN；如果需要开启预览模式，再加一行 VITE_PREVIEW_MODE=true（不需要则忽略）。

2. 修改App.js代码
   替换所有 process.env 为 import.meta.env，并对应变量名加上 VITE_ 前缀，同时删掉冗余代码：

App.js

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

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

const endpoint = import.meta.env.VITE_PREVIEW_MODE ?
  'https://graphql.datocms.com/preview' :
  'https://graphql.datocms.com/';
const client = new GraphQLClient({ 
  url: endpoint,
  headers: {
    "Authorization": import.meta.env.VITE_DATO_API_TOKEN
  } });

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

export default App

补充说明 #

Vite 只会暴露以 VITE_ 开头的环境变量到客户端代码中，其他前缀的变量不会被注入，必须遵守这个命名规则。修改完.env文件后，需要重启开发服务器才能生效。

内容的提问来源于stack exchange，提问作者Vicente Antonio G. Reyes