通过Webpack向客户端代码注入环境变量时process未定义

我尝试通过Webpack给前端打包代码提供部分环境变量访问权限，但客户端代码里process始终显示未定义。一开始以为是自己项目的Webpack配置有额外操作导致的，于是用默认的Create React App实例测试对比，结果发现同样的问题。

执行步骤 #

• 使用cra-template-pwa模板创建React应用：

  npx create-react-app my-app --template cra-template-pwa
  

• 执行npm run eject查看Webpack配置文件，确认config/webpack.config.js中的代码显示部分环境变量应通过客户端代码的process.env访问：

  // We will provide `paths.publicUrlOrPath` to our app
  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
  // Get environment variables to inject into our app.
  const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
  

  在webpack.config.js更下方的代码：

  // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
  // It is absolutely essential that NODE_ENV is set to production 
  // during a production build. 
  // Otherwise React will be compiled in the very slow development mode. 
  new webpack.DefinePlugin(env.stringified), 
  

  config/env.js中的代码显示，至少process.env.NODE_ENV会被设为development，不受底层环境影响：

  const raw = Object.keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce(
      (env, key) => {
        env[key] = process.env[key];
        return env;
      },
      {
        // Useful for determining whether we’re running in production mode.
        // Most importantly, it switches React into the correct mode.
        NODE_ENV: process.env.NODE_ENV || 'development',
        // Useful for resolving the correct path to static assets in `public`.
        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
        // This should only be used as an escape hatch. Normally you would put
        // images into the `src` and `import` them in code to get their paths.
        PUBLIC_URL: publicUrl,
        // We support configuring the sockjs pathname during development.
        // These settings let a developer run multiple simultaneous projects.
        // They are used as the connection `hostname`, `pathname` and `port`
        // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
        // and `sockPort` options in webpack-dev-server.
        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
        // Whether or not react-refresh is enabled.
        // It is defined here so it is available in the webpackHotDevClient.
        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
      }
    );
  // Stringify all values so we can feed into webpack DefinePlugin
  const stringified = {
    'process.env': Object.keys(raw).reduce((env, key) => {
      env[key] = JSON.stringify(raw[key]);
      return env;
    }, {}),
  };
  
  return { raw, stringified };
  

• 在App.js中添加console.log(process);：

  function App() {
  
    console.log(process);
  
    return (
      <div className="App">
        <header className="App-header">
  

• 执行npm start后，在http://localhost:3000的开发者工具控制台中收到错误：

  ReferenceError: process is not defined
      at App (App.js:7:1)
      at renderWithHooks (react-dom.development.js:15486:1)
      at mountIndeterminateComponent (react-dom.development.js:20103:1)
      at beginWork (react-dom.development.js:21626:1)
      at beginWork$1 (react-dom.development.js:27465:1)
      at performUnitOfWork (react-dom.development.js:26596:1)
      at workLoopSync (react-dom.development.js:26505:1)
      at renderRootSync (react-dom.development.js:26473:1)
      at recoverFromConcurrentError (react-dom.development.js:25889:1)
      at performConcurrentWorkOnRoot (react-dom.development.js:25789:1)
  

更新说明：此问题被标记为另一问题的重复项，但二者存在关键差异。另一问题聚焦配置细节，而本问题关注环境变量注入客户端应用的机制。我的配置实际是正确的（依赖Create React App默认配置），添加console.log(process)后才发现自己误解了变量的提供方式（是文本替换而非完整对象）。

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