"process" (and all env vars) not available after upgrade from 4.0.3 to 5.0.1

[qidydl]

Describe the bug

After upgrading the react-scripts package from 4.0.3 to 5.0.1, trying to run locally only results in a blank white screen in the browser. There is also an error message in the browser console: Uncaught ReferenceError: process is not defined. It appears that attempting to reference process in any way produces this error, even though this is documented by create-react-app in Adding Custom Environment Variables.

Did you try recovering your dependencies?

Yes, I completely deleted node_modules and package-lock.json and ran npm install -g npm@latest and npm install with no success. npm version is 8.8.0 and node version is 16.15.0.

Which terms did you search for in User Guide?

There's nothing about this on the troubleshooting page and the docs search didn't work for me--it complains about checking my network connection.

Environment

Environment Info:

  current version of create-react-app: 5.0.1
  running from C:\Users\david.o\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app

  System:
    OS: Windows 10 10.0.19043
    CPU: (16) x64 Intel(R) Core(TM) i9-10885H CPU @ 2.40GHz
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.8.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.32)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    react-scripts: ^5.0.1 => 5.0.1
  npmGlobalPackages:
    create-react-app: Not Found

Note that this is slightly incorrect because I am using Chrome v101.

Steps to reproduce

Initially, I made a single-line change to package.json to change the react-scripts dependency from "^4.0.3" to "^5.0.1". I ended up trying each of the following combinations, completely deleting node_modules and package-lock.json every time, and nothing worked:

1. Just react-scripts ^5.0.1
2. react-scripts ^5.0.1 and react-error-overlay 6.0.9
3. react-scripts ^5.0.1 and react-error-overlay 6.0.9 with an overrides for react-error-overlay 6.0.9
4. react-scripts ^5.0.1 and react-error-overlay 6.0.9 with an overrides for react-error-overlay 6.0.9 and a suggested code addition in the App:

   useEffect(() => { window.process = { ...window.process, }; }, []);

5. Just react-scripts ^5.0.1 with the code addition

I also ran npm update just in case and it updated a couple of packages but did not fix anything.

Expected behavior

Upgrading react-scripts from 4.0.3 to 5.0.1 would be straightforward and not break my code.

Actual behavior

Upgrading react-scripts from 4.0.3 to 5.0.1 completely breaks all ability to run locally and we have no choice but to revert.

Reproducible demo

I do not have legal permission to share our code so I cannot provide an entire demo, but even just npx create-react-app --template typescript and adding console.log(process); to App.tsx produces this result.

[blessonabrahamah]

We are still facing this issue. Have tried all the solutions mentioned here: https://github.com/facebook/create-react-app/issues/11773 but none of them worked.

[hamidmayeli]

I am facing the same issue and I am wondering if it's going to be fixed.

[dbuchet]

For people still stuck with that error, here is how I fixed it. I used craco because did not want to eject from RS. Then in the craco.config.js having this:

const webpack = require('webpack');

module.exports = {
    webpack: {
        plugins: {
            add: [
                new webpack.ProvidePlugin({
                    process: 'process/browser.js',
                })
            ]
        },
        configure: {
            resolve: {
                fallback: {
                    'fs': false,
                    'path': false,
                    'crypto': false,
                }
            },
        },
    },
};

You might not need to have the configure.resolve.fallback part, but if you're stuck with error like "fs/path/crypto" is not defined, you have the resolution here too :)

You'll also need to have process as dev dependency

yarn add -D process

[Xarlizard]

The issue is still persistent... it would be nice to have it fixed without the need to use craco :,)

[qidydl]

For what it’s worth to anyone else encountering this issue, it looks like create-react-app is no longer maintained or recommend by React. We solved the problem by migrating to Vite and I’m very happy with that solution.