Процесс не определен при попытке предоставить переменные среды клиентскому коду через веб-пакет

Я пытаюсь предоставить доступ к определенным переменным среды в пакете кода внешнего интерфейса с помощью веб-пакета, но процесс всегда не определен. Приложение, над которым я работаю, выполняет множество дополнительных действий в конфигурации веб-пакета, которые, как я думал, могут создавать проблемы, поэтому я хотел посмотреть, как оно работает с экземпляром приложения Create React по умолчанию, а затем сравнить их. Однако я наблюдаю такое же поведение с экземпляром приложения Create React (процесс всегда не определен в коде на стороне клиента).

Вот шаги, которые я выполнил:

1. Создал приложение реагирования, используя шаблон cra-template-pwa: npx create-react-app my-app --template cra-template-pwa
2. Выполнил команду npm run eject для просмотра файлов конфигурации веб-пакета и подтвердил, что в этом коде из conifg/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 };
}

3. Затем в App.js я добавил console.info(process);

function App() {

  console.info(process);

  return (
    <div className = "App">
      <header className = "App-header">

4. Запустил 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)

ОБНОВЛЕНИЕ: этот вопрос помечен как дубликат Uncaught ReferenceError: процесс не определен однако я считаю, что между ними есть ключевое различие. Другой вопрос полностью сосредоточен на деталях настройки конфигурации, тогда как этот вопрос касается механики внедрения данных в клиентское приложение. Конфигурация, которая у меня была, на самом деле была правильной (поскольку я полагался на приложение Create React, которое выполнит настройку за меня). Это было, когда я попытался устранить неполадки в поведении, добавив console.info(process); затем было продемонстрировано, что я неправильно понимал, как данные стали доступны (как объект или прямая замена текста). ТЛ;ДР; Я чувствую, что в этом вопросе и ответе есть знания, которые не так очевидны в другой теме.