React项目中JSX文件使用dotenv引入环境变量报错求助

核心原因 #

• React项目（比如Create React App脚手架创建的）自带.env变量加载机制，不需要手动安装或引入dotenv包。dotenv是Node.js环境下加载环境变量的工具，而JSX文件最终会编译后在浏览器端运行，浏览器环境不支持Node.js的require语法，也不需要dotenv处理变量。
• 你提到的另一个能正常用require的JS文件，大概率是在Node.js环境运行的（比如后端脚本、webpack配置这类服务端/构建阶段执行的文件），这类文件属于Node环境，所以支持require。

正确使用.env的步骤 #

1. 在项目根目录创建.env文件，所有要暴露给前端的变量必须以**REACT_APP_**为前缀，示例：

   REACT_APP_API_TOKEN=your_actual_token
   

2. 直接在JSX/JS文件中使用process.env.REACT_APP_API_TOKEN即可，不需要任何额外引入代码。
3. 重启开发服务器（npm start），因为Create React App只会在启动时加载.env变量，修改后必须重启才会生效。

常见误区 #

• 别手动引入dotenv包，前端编译后的代码跑在浏览器里，没有Node.js的process对象（除非是构建阶段注入的）。
• 变量名必须加REACT_APP_前缀，否则Create React App会自动忽略，不会注入到前端代码中。
• 不要把.env文件提交到版本控制（记得在.gitignore里添加），防止敏感信息泄露。

内容的提问来源于stack exchange，提问作者Ko Te Atarangi Ahau