为何使用可选链操作符process?.env会触发ReferenceError错误？

核心原因在于Create React App（CRA）的环境变量替换机制： #

• CRA的静态替换逻辑：CRA通过Webpack的DefinePlugin在构建阶段，会对代码中静态出现的process.env.REACT_APP_*格式变量做直接替换。比如你写process.env.REACT_APP_HEADER_SUFFIX，构建后会被替换成实际的环境变量值（比如"dev"），如果变量不存在则替换成undefined——整个过程不会留下process这个变量引用，浏览器运行时根本不会接触到process这个不存在的全局对象。

• 可选链?.破坏了静态替换：当你使用process?.env?.REACT_APP_HEADER_SUFFIX时，?.语法会让代码保留对process变量的直接引用。CRA的构建工具无法正确识别并替换这种带可选链的写法，导致最终打包后的代码里依然存在process这个变量名。而浏览器环境中本来就没有Node.js的process全局对象，所以运行时直接抛出ReferenceError: process is not defined。

• 为什么去掉可选链就正常？ 因为process.env.REACT_APP_HEADER_SUFFIX是静态可分析的格式，构建工具能完整替换掉整个表达式，不会留下process的引用，自然不会触发报错。

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