Search code examples
webpackwebpack-5react-scripts

ReferenceError: process is not defined at Object../node_modules/path/path.js (bundle.js:674629:17)

I am trying to upgrade my react project to web-pack 5. I am using create-react-app. When I did so I got the following errors:

    Compiled with problems:X

ERROR in ./node_modules/content-disposition/index.js 19:15-39

Module not found: Error: Can't resolve 'path' in '/home/kboul/Documents/Apps/earthnetviewer/esa_react/node_modules/content-disposition'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }


ERROR in ./node_modules/jszip/lib/readable-stream-browser.js 9:0-34

Module not found: Error: Can't resolve 'stream' in '/home/kboul/Documents/Apps/earthnetviewer/esa_react/node_modules/jszip/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }


ERROR in ./node_modules/safe-buffer/index.js 2:13-30

Module not found: Error: Can't resolve 'buffer' in '/home/kboul/Documents/Apps/earthnetviewer/esa_react/node_modules/safe-buffer'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }


ERROR in ./node_modules/shpjs/lib/binaryajax-browser.js 7:15-39

Module not found: Error: Can't resolve 'buffer' in '/home/kboul/Documents/Apps/earthnetviewer/esa_react/node_modules/shpjs/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }


ERROR in ./node_modules/shpjs/lib/binaryajax-fetch.js 7:15-39

Module not found: Error: Can't resolve 'buffer' in '/home/kboul/Documents/Apps/earthnetviewer/esa_react/node_modules/shpjs/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }


ERROR in ./node_modules/shpjs/lib/index.js 21:15-39

Module not found: Error: Can't resolve 'buffer' in '/home/kboul/Documents/Apps/earthnetviewer/esa_react/node_modules/shpjs/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }

To resolve these errors I installed each of the above-mentioned packages individually, created a webpack.config.js and included there:

module.exports = {
  resolve: {
    fallback: { path: false, buffer: false, stream: false }
  }
};

as I did not care including pollyfils and supporting old browsers.

I also tried this in case I wanted to support them.

module.exports = {
  resolve: {
    fallback: {
      buffer: require.resolve('buffer/'),
      path: require.resolve('path-browserify'),
      stream: require.resolve('stream-browserify')
    }
  }
};

I removed package-lock.json and node_modules hit npm i, npm start and I got this:

Uncaught ReferenceError: process is not defined
    at Object../node_modules/path/path.js (bundle.js:sourcemap:674629:17)
    at Object.options.factory (bundle.js:sourcemap:1195967:31)
    at __webpack_require__ (bundle.js:sourcemap:1195348:33)
    at fn (bundle.js:sourcemap:1195638:21)
    at Object../node_modules/content-disposition/index.js (bundle.js:sourcemap:543216:17)
    at Object.options.factory (bundle.js:sourcemap:1195967:31)
    at __webpack_require__ (bundle.js:sourcemap:1195348:33)
    at fn (bundle.js:sourcemap:1195638:21)
    at Module../src/utils/files.js (bundle.js:sourcemap:235901:77)
    at Module.options.factory (bundle.js:sourcemap:1195967:31)

I have tried all the possible solutions that can be found on the net but with no luck including this thread and this one

I have also installed process library and declare it in the webpack. Still the same error. Any recommendations are welcome.

I have created a related issue on the official react-scripts github repo issues

Solution

  • What I did eventually after upgrading react-scipts to 5.0.1 version was:

    1. Replaced content-disposition library with vanillajs code. Was used to extract the filename from a blob response

    2. Replaced base64url library with jwt-decode to decode a jwt token

    3. Installed stream library version 0.0.2 on the dev dependencies and that allowed me in the end to use both shpjs and jszip libraries as it seemed that they required node env variables that are included in that package.

    4. Upgraded then jszip to the latest version (3.10.0) from 3.5.0

    5. Because I received too many eslint errors I had to modify .eslintrc and replace:

      {
  ...
"env": {
      "browser": true,
 from "es6": true,
 to   "es2021": true,
      "jest": true
    },

 "parserOptions": {
      "sourceType": "module",
 from   "ecmaVersion": 2018,
 to     "ecmaVersion": 13,
      "ecmaFeatures": {
        "jsx": true
       }
    },
...
}

    also remove "parser": "babel-eslint" as this package is deprecated and no longer maintained

    To my own surprise I had to remove these 3 from eslint extends

    "extends": [
   "plugin:testing-library/recommended",
   "plugin:testing-library/react",
   "plugin:jest-dom/recommended",
  ],

    and these 2 from "plugins": ["testing-library", "jest-dom"]

    as I was receiving the following error:

    [eslint] Failed to load plugin 'testing-library' declared in '.eslintrc.json': Class extends value undefined is not a constructor or null Referenced from: /home/.../.eslintrc.json

    Then I thought to remove the testing-library declarations temporarily inside eslintrc to be able to move forward but in the end it seems that tests were running without any issues after completing all the mentioned steps

    and then on package.json upgraded eslint from 7.22.0 to 8.20.0

    and finally upgrade:

    eslint-plugin-import to 2.26.0
eslint-plugin-react to 7.30.1
eslint-plugin-react-hooks" to 4.6.0
eslint-config-airbnb to 19.0.4
prettier to 2.7.1

    I know it is very custom project related but hopefully can help other people with similar issues