.env files is not working with CRA 5

Describe the bug

I created totally fresh CRA5 project (TypeScript), except .env added in the project root and src/App.tsx is modified with attempt to access process.env variables. I got crash with unhandled exception process is undefined. I think it’s somehow related to Webpack 5 upgrade.

Did you try recovering your dependencies?

No, because project is fresh create-react-app v5 bootstrap.

Which terms did you search for in User Guide?

https://create-react-app.dev/docs/adding-custom-environment-variables/ said everything is supposed to work fine.

Environment

Environment Info:

  current version of create-react-app: 5.0.0
  running from /Users/evgenijvladimirovic/.npm/_npx/33863/lib/node_modules/create-react-app

  System:
    OS: macOS 12.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - /usr/local/bin/npm
  Browsers:
    Chrome: 97.0.4692.71
    Edge: Not Found
    Firefox: 94.0.2
    Safari: 15.2
  npmPackages:
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    react-scripts: 5.0.0 => 5.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. npx create-react-app my-app --template typescript
2. Add .env file in the project root with the line REACT_APP_FOO=foo
3. Try to access process.env.REACT_APP_FOO (or just process itself) somehow. I, for ex, added console.log("process is ", process); and {process.env.REACT_APP_FOO} ini JSX.

Expected behavior

I got the REACT_APP_FOO value from .env file, just like in CRA Docs:

Actual behavior

I got Unhandled Exception, process is undefined:

Reproducible demo

https://github.com/ru-web-designer/cra5-process-env-issue

[kitsunekyo]

we also found that CRA5 is almost unusable without ejecting at the moment.

we ejected, installed process and added this line to the webpack config:

resolve: {
      // ...
      alias: {
        // ...
        process: 'process/browser',
      },

[pganster]

With CRA 5, webpack was upgraded to v5, where node built-ins (such as process) have been removed.

You either need to eject your app which isn’t desirable or use something like craco to configure webpack with an unejected create-react-app.

There is an open pull request that should address this issue.