React项目出现ReferenceError: process is not defined问题求助

问题描述 #

运行React项目时使用环境变量，出现错误ReferenceError: process is not defined，已尝试安装最新版react-scripts，且.env文件放在项目根目录，但问题未解决。相关代码片段如下：

import "./FeaturedProducts.scss";
import Card from "../Card/Card";
import axios from "axios";

const FeaturedProducts = ({ type }) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await axios.get(
          process.env.REACT_APP_API_URL + "/products",
          {
            headers: {
              Authorization: "bearer" + process.env.REACT_APP_API_TOKEN,
            },
          }
        );
        setData(res.data.data);
        console.log(data);
      } catch (err) {
        console.log(err);
      }
    };

    fetchData();
  }, []);

  return (
    <div className="featuredProducts">
      <div className="top">
        <h1>{type} products</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam,
          voluptate itaque sed vero quidem asperiores deserunt reprehenderit id
          optio iusto modi cum ipsa eum veritatis, beatae, magni odit delectus
          aut!
        </p>
      </div>
      <div className="bottom">
        {data.map((item) => (
          <Card item={item} key={item.id} />
        ))}
      </div>
    </div>
  );
};

export default FeaturedProducts;

解决方案 #

• 严格遵循环境变量命名规则：所有自定义环境变量必须以REACT_APP_开头，比如REACT_APP_API_URL、REACT_APP_API_TOKEN，缺少前缀的变量不会被React脚手架自动注入到项目中。
• 重启开发服务器：修改.env文件后必须重启npm start，否则新的环境变量不会生效。
• 确认项目脚手架类型：如果是用Vite创建的React项目，Vite不支持process.env语法，需要改用import.meta.env.REACT_APP_*，示例代码修改如下：

  const res = await axios.get(
    import.meta.env.REACT_APP_API_URL + "/products",
    {
      headers: {
        Authorization: "bearer" + import.meta.env.REACT_APP_API_TOKEN,
      },
    }
  );
  

• 验证.env文件位置：确保.env文件放在项目根目录（与package.json同级），不要放在src或其他子目录下。
• 自定义webpack项目需额外配置：如果是手动搭建的webpack项目，需要安装dotenv并配置DefinePlugin：
  1. 安装依赖：npm install dotenv --save-dev
  2. 在webpack.config.js中添加配置：

     require('dotenv').config();
     const webpack = require('webpack');
     
     module.exports = {
       // ...其他配置项
       plugins: [
         new webpack.DefinePlugin({
           'process.env': JSON.stringify(process.env)
         })
       ]
     }
     

• 检查拼写一致性：确认代码中环境变量的拼写与.env文件中的完全一致，包括大小写。

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