TypeError：降级到react-scripts v4.0.3后无法读取未定义的属性（读取“原型”）

Question

我遇到了这个问题：在尝试修复之前的错误后

(Uncaught Error: Module build failed (from ./node_modules/source-map-loader/dist/cjs.js))

我终于使用 npm install 来处理它。但之后我在控制台中看到这个错误：

path.js:25 Uncaught ReferenceError: process is not defined

错误位置在这里：

我的依赖项是：

控制台错误：

[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

我尝试过的：

删除node_modules和package-lock并重新运行npm install
删除包路径，dotenv
将react-script降级到v4.0.7并添加到devdep“react-error-overlay”：“^6.0.9”
安装一些模块时控制台显示错误

如果有人可以帮助我，我会非常高兴，我找不到解决此问题的方法或为什么会发生这种情况。

您可以在此处访问该应用程序：https://growapp.ngrok.io/

再次降级到react-scripts v4.0.3后，错误得到修复。但现在应用程序抛出此错误：

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__

我的快速实例创建：

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

我无法使用 require，因为我需要将 package.json 中的类型更改为 module。

Answer 1

解决如下：

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

Webpack 可以将环境变量注入“客户端”.js 代码（在 SPA/PWA 的情况下非常有用）。你应该在 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 ...
    })
],
}

所以我只是将其添加到我的 webpack-config.js 中

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

TypeError：降级到react-scripts v4.0.3后无法读取未定义的属性（读取“原型”）

问题描述投票：0回答：1

1个回答

最新问题

TypeError：降级到react-scripts v4.0.3后无法读取未定义的属性（读取“原型”）

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1