TypeError: Cannot read properties of undefined (reading 'prototype') after downgrading to react-scripts v4.0.3

Question

i hope that you all are well. Im having this issue: after trying to fix a previous error (Uncaught Error: Module build failed (from ./node_modules/source-map-loader/dist/cjs.js)) i finally handle it using npm install. But after that I see this error in the console: path.js:25 Uncaught ReferenceError: process is not defined

The error is located here:

My dependencies are:

Console errors:

[1] WARNING in ./node_modules/express/lib/view.js 74:13-25
[1] Critical dependency: the request of a dependency is an expression
[1]  @ ./node_modules/express/lib/application.js 26:11-28
[1]  @ ./node_modules/express/lib/express.js 19:12-36
[1]  @ ./node_modules/express/index.js 10:0-41
[1]  @ ./src/pages/LogIn.js 6:0-35
[1]  @ ./src/App.js 8:0-34 34:40-45
[1]  @ ./src/index.js 9:0-24 15:35-38
[1]
[1] 1 warning has detailed information that is not shown.
[1] Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
[1]
[1] ERROR in ./node_modules/cookie-signature/index.js 4:13-30
[1] Module not found: Error: Can't resolve 'crypto' in 'C:\Users\tatup\Desktop\GrowApp\frontend\node_modules\cookie-signature'
[1] 
[1] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
[1] This is no longer the case. Verify if you need this module and configure a polyfill for it.
[1]
[1] If you want to include a polyfill, you need to:
[1]     - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
[1]     - install 'crypto-browserify'
[1] If you don't want to include a polyfill, you can use an empty module like this:
[1]     resolve.fallback: { "crypto": false }
[1]  @ ./node_modules/express/lib/response.js 35:11-43
[1]  @ ./node_modules/express/lib/express.js 27:10-31
[1]  @ ./node_modules/express/index.js 10:0-41
[1]  @ ./src/pages/LogIn.js 6:0-35
[1]  @ ./src/App.js 8:0-34 34:40-45
[1]  @ ./src/index.js 9:0-24 15:35-38
[1]
[1] ERROR in ./node_modules/destroy/index.js 12:17-41
[1] Module not found: Error: Can't resolve 'fs' in 'C:\Users\tatup\Desktop\GrowApp\frontend\node_modules\destroy'
[1]  @ ./node_modules/send/index.js 19:14-32
[1]  @ ./node_modules/express/lib/response.js 45:11-26
[1]  @ ./node_modules/express/lib/express.js 27:10-31
[1]  @ ./node_modules/express/index.js 10:0-41
[1]  @ ./src/pages/LogIn.js 6:0-35
[1]  @ ./src/App.js 8:0-34 34:40-45
[1]  @ ./src/index.js 9:0-24 15:35-38
[1]
[1] ERROR in ./node_modules/etag/index.js 18:13-30
[1] Module not found: Error: Can't resolve 'crypto' in 'C:\Users\tatup\Desktop\GrowApp\frontend\node_modules\etag'
[1] 
[1] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
[1] This is no longer the case. Verify if you need this module and configure a polyfill for it.
[1]
[1] If you want to include a polyfill, you need to:
[1]     - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
[1]     - install 'crypto-browserify'
[1] If you don't want to include a polyfill, you can use an empty module like this:
[1]     resolve.fallback: { "crypto": false }
[1]  @ ./node_modules/express/lib/utils.js 25:11-26
[1]  @ ./node_modules/express/lib/application.js 30:18-48 32:25-62 34:19-50
[1]  @ ./node_modules/express/lib/express.js 19:12-36
[1]  @ ./node_modules/express/index.js 10:0-41
[1]  @ ./src/pages/LogIn.js 6:0-35
[1]  @ ./src/App.js 8:0-34 34:40-45
[1]  @ ./src/index.js 9:0-24 15:35-38
[1]
[1] ERROR in ./node_modules/etag/index.js 20:12-31
[1] Module not found: Error: Can't resolve 'fs' in 'C:\Users\tatup\Desktop\GrowApp\frontend\node_modules\etag' 
[1]  @ ./node_modules/express/lib/utils.js 25:11-26
[1]  @ ./node_modules/express/lib/application.js 30:18-48 32:25-62 34:19-50
[1]  @ ./node_modules/express/lib/express.js 19:12-36
[1]  @ ./node_modules/express/index.js 10:0-41
[1]  @ ./src/pages/LogIn.js 6:0-35
[1]  @ ./src/App.js 8:0-34 34:40-45
[1]  @ ./src/index.js 9:0-24 15:35-38
[1]
[1] ERROR in ./node_modules/express/lib/application.js 28:11-26
[1] Module not found: Error: Can't resolve 'http' in 'C:\Users\tatup\Desktop\GrowApp\frontend\node_modules\express\lib'
[1] 
[1] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
[1] This is no longer the case. Verify if you need this module and configure a polyfill for it.
[1]
[1] If you want to include a polyfill, you need to:
[1]     - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
[1]     - install 'stream-http'
[1] If you don't want to include a polyfill, you can use an empty module like this:
[1]     resolve.fallback: { "http": false }
[1]  @ ./node_modules/express/lib/express.js 19:12-36
[1]  @ ./node_modules/express/index.js 10:0-41
[1]  @ ./src/pages/LogIn.js 6:0-35
[1]  @ ./src/App.js 8:0-34 34:40-45
[1]  @ ./src/index.js 9:0-24 15:35-38
[1]
[1] ERROR in ./node_modules/express/lib/request.js 18:11-30
[1] Module not found: Error: Can't resolve 'net' in 'C:\Users\tatup\Desktop\GrowApp\frontend\node_modules\express\lib'
[1]  @ ./node_modules/express/lib/express.js 25:10-30
[1]  @ ./node_modules/express/index.js 10:0-41
[1]  @ ./src/pages/LogIn.js 6:0-35
[1]  @ ./src/App.js 8:0-34 34:40-45
[1]  @ ./src/index.js 9:0-24 15:35-38
[1]
[1] ERROR in ./node_modules/express/lib/request.js 22:11-26
[1] Module not found: Error: Can't resolve 'http' in 'C:\Users\tatup\Desktop\GrowApp\frontend\node_modules\express\lib'
[1] 
[1] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
[1] This is no longer the case. Verify if you need this module and configure a polyfill for it.
[1]
[1] If you want to include a polyfill, you need to:
[1]     - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
[1]     - install 'stream-http'
[1] If you don't want to include a polyfill, you can use an empty module like this:
[1]     resolve.fallback: { "http": false }
[1]  @ ./node_modules/express/lib/express.js 25:10-30
[1]  @ ./node_modules/express/index.js 10:0-41
[1]  @ ./src/pages/LogIn.js 6:0-35
[1]  @ ./src/App.js 8:0-34 34:40-45
[1]  @ ./src/index.js 9:0-24 15:35-38
[1]
[1] ERROR in ./node_modules/express/lib/response.js 23:11-26
[1] Module not found: Error: Can't resolve 'http' in 'C:\Users\tatup\Desktop\GrowApp\frontend\node_modules\express\lib'
[1] 
[1] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
[1] This is no longer the case. Verify if you need this module and configure a polyfill for it.
[1]
[1] If you want to include a polyfill, you need to:
[1]     - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
[1]     - install 'stream-http'
[1] If you don't want to include a polyfill, you can use an empty module like this:
[1]     resolve.fallback: { "http": false }
[1]  @ ./node_modules/express/lib/express.js 27:10-31
[1]  @ ./node_modules/express/index.js 10:0-41
[1]  @ ./src/pages/LogIn.js 6:0-35
[1]  @ ./src/App.js 8:0-34 34:40-45
[1]  @ ./src/index.js 9:0-24 15:35-38
[1]
[1] ERROR in ./node_modules/express/lib/view.js 18:9-22
[1] Module not found: Error: Can't resolve 'fs' in 'C:\Users\tatup\Desktop\GrowApp\frontend\node_modules\express\lib'
[1]  @ ./node_modules/express/lib/application.js 26:11-28
[1]  @ ./node_modules/express/lib/express.js 19:12-36
[1]  @ ./node_modules/express/index.js 10:0-41
[1]  @ ./src/pages/LogIn.js 6:0-35
[1]  @ ./src/App.js 8:0-34 34:40-45
[1]  @ ./src/index.js 9:0-24 15:35-38
[1]
[1] ERROR in ./node_modules/mime/mime.js 3:9-22
[1] Module not found: Error: Can't resolve 'fs' in 'C:\Users\tatup\Desktop\GrowApp\frontend\node_modules\mime' 
[1]  @ ./node_modules/send/index.js 31:11-26
[1]  @ ./node_modules/express/lib/response.js 45:11-26
[1]  @ ./node_modules/express/lib/express.js 27:10-31
[1]  @ ./node_modules/express/index.js 10:0-41
[1]  @ ./src/pages/LogIn.js 6:0-35
[1]  @ ./src/App.js 8:0-34 34:40-45
[1]  @ ./src/index.js 9:0-24 15:35-38
[1]
[1] ERROR in ./node_modules/send/index.js 29:9-22
[1] Module not found: Error: Can't resolve 'fs' in 'C:\Users\tatup\Desktop\GrowApp\frontend\node_modules\send' 
[1]  @ ./node_modules/express/lib/response.js 45:11-26
[1]  @ ./node_modules/express/lib/express.js 27:10-31
[1]  @ ./node_modules/express/index.js 10:0-41
[1]  @ ./src/pages/LogIn.js 6:0-35
[1]  @ ./src/App.js 8:0-34 34:40-45
[1]  @ ./src/index.js 9:0-24 15:35-38
[1]
[1] ERROR in ./node_modules/zlib/lib/zlib.js
[1] Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
[1] Error: ENOENT: no such file or directory, open 'C:\Users\tatup\Desktop\GrowApp\frontend\node_modules\zlib\lib\zlib.js'
[1]  @ ./node_modules/body-parser/lib/read.js 20:11-26
[1]  @ ./node_modules/body-parser/lib/types/json.js 21:11-29
[1]  @ ./node_modules/body-parser/index.js 134:15-42
[1]  @ ./node_modules/express/lib/express.js 13:17-39
[1]  @ ./node_modules/express/index.js 10:0-41
[1]  @ ./src/pages/LogIn.js 6:0-35
[1]  @ ./src/App.js 8:0-34 34:40-45
[1]  @ ./src/index.js 9:0-24 15:35-38
[1]
[1] 11 errors have detailed information that is not shown.
[1] Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
[1]
[1] webpack 5.66.0 compiled with 12 errors and 1 warning in 277 ms

What I have tried:

Remove node_modules and package-lock and re-running npm install
Remove package path, dotenv
Downgrading react-script to v4.0.7 and adding to devdep "react-error-overlay": "^6.0.9"
Installing some of the modules showed on console errors

If anyone can help me I would be very glad, I cant find a way to fix this or why this is happening.

U can visit the app here: https://growapp.ngrok.io/

UPDATE After downgrading to react-scripts v4.0.3 again that errors were fixed. But now the app throws this error:

TypeError: Cannot read properties of undefined (reading 'prototype')
(anonymous function)
C:/Users/tatup/Desktop/GrowApp/frontend/node_modules/express/lib/response.js:42
  39 |  * @public
  40 |  */
  41 | 
> 42 | var res = Object.create(http.ServerResponse.prototype)
  43 | 
  44 | /**
  45 |  * Module exports.
View compiled
./node_modules/express/lib/response.js
https://growapp.ngrok.io/static/js/vendors~main.chunk.js:42203:30
__webpack_require__

My express instance creation:

import express from 'express'
const app = express()

I cant use require because I needed to change the type to module in package.json.

Any clue ? Thanks

hi, not sure if this might be of interest https://stackoverflow.com/questions/30239060/uncaught-referenceerror-process-is-not-defined — jspcal, Jan 19 '22 at 01:59
I cant found anything usefull in there, and in any other github/reddit post — Santiago Paradelo, Jan 19 '22 at 02:06
Since the process is not defined, I think your node is not running. Please execute your node code. — frangly, Jan 19 '22 at 02:23
@frangly Im running both node sv, server with nodemon backend/server and client with npm start --prefix frontend, using concurrently concurrently \"npm run server\" \"npm run client\ — Santiago Paradelo, Jan 19 '22 at 02:25
[Please do not upload images of code/errors when asking a question](//meta.stackoverflow.com/q/285551). See also [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) and [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) from the help centre. — Phil, Jan 19 '22 at 02:53

score -1 · Answer 1 · answered Jan 28 '22 at 11:19

Solved following this:

https://flutterq.com/solved-uncaught-referenceerror-process-is-not-defined/

Webpack can inject environment variables into the “client side” .js code (very useful in case of SPA/PWA). You should define them as plugins in webpack.config.js

module.exports = {
plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.MY_ENV': JSON.stringify(process.env.MY_ENV),
      ... and so on ...
    })
],
}

So I just added this to my webpack-config.js

module.exports = {
    plugins: [
          new webpack.DefinePlugin({
                'process.platform': JSON.stringify(process.platform)
            })
     ]
}

People that are using `react-scripts` cannot update their Webpack config like you suggest. — greg5green, Jul 21 '22 at 06:02

TypeError: Cannot read properties of undefined (reading 'prototype') after downgrading to react-scripts v4.0.3

1 Answers1