使用Vite+React+Apollo Client时Node modules报错求助

问题原因 #

Vite与CRA（Create React App）的环境变量处理逻辑存在差异，导致graphql包中的process.env.NODE_ENV被错误转换为非法语法格式，引发代码执行崩溃。

解决方案 #

1. 确认依赖安装 #

确保项目已正确安装@apollo/client和graphql依赖：

npm install @apollo/client graphql
# 或使用yarn
yarn add @apollo/client graphql

2. 配置Vite环境变量映射 #

在项目根目录的vite.config.js（或vite.config.ts）中添加define配置，将process.env.NODE_ENV映射为Vite原生环境变量：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  define: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
  }
})

3. 优化Apollo Client导入方式 #

无需从@apollo/client/core子模块导入，直接从主包导入即可（官方推荐方式，避免路径相关潜在问题）：

import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  gql,
} from "@apollo/client";

const client = new ApolloClient({
  uri: "https://flyby-router-demo.herokuapp.com/",
  cache: new InMemoryCache(),
});

ReactDOM.createRoot(document.getElementById("root")).render(
  <ApolloProvider client={client}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </ApolloProvider>
);

4. 重启开发服务 #

修改配置后，重启Vite开发服务器使配置生效：

npm run dev
# 或
yarn dev

功能验证 #

服务启动后，可在App组件中添加测试查询验证Apollo Client是否正常工作：

import { useQuery } from '@apollo/client';

const GET_LOCATIONS = gql`
  query GetLocations {
    locations {
      id
      name
      description
      photo
    }
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_LOCATIONS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error : {error.message}</p>;

  return (
    <ul>
      {data.locations.map((location) => (
        <li key={location.id}>{location.name}</li>
      ))}
    </ul>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Anteater333