fix process is not defined

[rannn505]

Since Webpack 5 no longer shims node builtins, the process global is not defined, causing the "Adding Custom Environment Variables" functionality to be broken.

This PR proposes a minimal fix that doesn't involve any external packages like "process".

I verified the fix by locally modifying packages/react-scripts/config/env.js file.

[facebook-github-bot]

Hi @rannn505!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

[rannn505]

fixes #11951
link #11764
external https://stackoverflow.com/questions/65018431/webpack-5-uncaught-referenceerror-process-is-not-defined

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[rannn505]

@iansu @mrmckeb anyone?

[matthieubouchard]

would love to see this merged if it's a good change! I'm encountering this issue on several projects. Thanks!

[kevin-watterson769]

That fixed my problem, after two days of searching, I'll wait for the merge, thanks

[draysams]

Any update on this. Please look into getting this PR out to us as it is much needed

[kintz09]

I'm working through the webpack 5 polyfill issues for a project being upgraded to CRA5. I'm still testing this fix, but @rannn505's solution seems to have worked for me using @craco/craco 7.0.0. Here's my craco config that eliminated the 'process is not defined' error:

// craco.config.js

const webpack = require('webpack');

module.exports = {
  webpack: {
    configure: {
      resolve: {
        fallback: {
          crypto: require.resolve("crypto-browserify"),
          stream: require.resolve("stream-browserify"),
        },
      },
    },
    plugins: {
      add: [
        new webpack.DefinePlugin({
          process: {},
        }),
      ],
    },
  },
};

Notes:

• The webpack.configure.resolve.fallback entries are other missing polyfills I needed. As far as I know, only the plugin entry is needed to fix this 'process is not defined' error.
• I did not have to install the process module from NPM to fix the error

If anyone sees a problem with this temp fix, please let me know so I can review.