Webpack 5不再对节点核心模块进行自动填充。 请问怎么修?

break CHANGE:默认情况下,webpack < 5用于为node.js核心模块包含polyfills。 现在情况已经不同了。验证你是否需要这个模块,并为它配置一个填充。


当前回答

看起来你已经使用了默认情况下不包含在webpack构建中的path包。对我来说,像这样扩展webpack配置有帮助:

{
  // rest of the webpack config
  resolve: {
    // ... rest of the resolve config
    fallback: {
      "path": require.resolve("path-browserify")
    }
  },
}

也可以通过npm install path-browserify——save-dev或yarn添加path-browserify——dev来安装path-browserify。

其他回答

错误:[webpack < 5用于默认包含node.js核心模块的腻子。

现在情况已经不同了。验证你是否需要这个模块,并为它配置一个填充。

答: Node_modules > react-scripts > config > webpack.config.js

在webpack.config.js文件中添加:

resolve: {
      fallback: { 
        "http": require.resolve("stream-http") ,
         "path": require.resolve("path-browserify") 
        },
}

我在create-react-app中遇到了这个问题

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.2"

我通过将react-scripts更改为4.0.3版本来解决这个问题。

对于我(使用React => v17;React脚本=> v5;webpack => v5),由@Letton和@Richie Bendall建议的解决方案组合与另一个附加,即包一起工作。Json中,必须添加并安装以下包。还请注意fs版本“^2.0.0”抛出一个错误,因此更改为“0.0.1-security”。

"assert": "^2.0.0", 
"https-browserify": "^1.0.0", 
"os": "^0.1.2",
"os-browserify": "^0.3.0",
"react-app-rewired": "^2.1.9",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"fs":"^0.0.1-security",
"crypto-browserify": "3.12.0",
"buffer":"^6.0.3",
"node-polyfill-webpack-plugin": "^2.0.1"

安装完这些后,执行剩下的步骤,即将config-override .js添加到根目录,并更改包中的脚本内容。从react-scripts到react-app-rewired的Json修复了这个问题。

当从webpack v4升级到v5时,我也得到了这些错误。 通过对webpack.config.js进行以下更改来解决

添加的决心。回退财产

删除节点属性

{
resolve: {
  modules: [...],
  fallback: {
    "fs": false,
    "tls": false,
    "net": false,
    "path": false,
    "zlib": false,
    "http": false,
    "https": false,
    "stream": false,
    "crypto": false,
    "crypto-browserify": require.resolve('crypto-browserify'), //if you want to use this module also don't forget npm i crypto-browserify 
  } 
},
entry: [...],
output: {...},
module: {
  rules: [...]
},
plugins: [...],
optimization: {
  minimizer: [...],
},
// node: {
//   fs: 'empty',
//   net: 'empty',
//   tls: 'empty'
// },
}

从v4升级到v5 => https://webpack.js.org/migrate/5/#clean-up-configuration

如果你使用Twilio:

Twilio模块不是用于客户端JavaScript的,这就是它在Angular应用中失败的原因。Twilio使用您的帐户SID和您的认证令牌,在客户端使用代表风险; 所以最好是在服务器端使用它并使用API。