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

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


当前回答

在create-react-app v17和脚本5.0.0中,你需要在webpack.config.js中添加一个备份,并安装'process'。

   `module.exports = function (webpackEnv) {
      .........
      return {
       .........
      resolve: {
      ..........
      fallback: { "process": require.resolve("process/browser") },`

其他回答

如果你使用Twilio:

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

使用node-polyfill-webpack-plugin重新添加对Node.js核心模块的支持:

安装包后,将以下内容添加到webpack.config.js中:

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {
    // Other rules...
    plugins: [
        new NodePolyfillPlugin()
    ]
}

我的应用昨天也抛出了同样的错误。我花了几个小时在SO上阅读问题/答案,并尝试了一些。对我有用的是:

https://github.com/ChainSafe/web3.js#troubleshooting-and-known-issues

Secret的答案几乎对我有用(我还没有足够的声誉来评论,抱歉!)

按照他们的回答,然后告诉我,因为在eslint的要求版本的差异,我应该添加SKIP_PREFLIGHT_CHECK=true到项目中的.env文件,所以我只是把它添加到我现有的一个。

然后它将成功构建(终于!)但后来我注意到,至少在Chrome中,我无法点击任何东西,甚至无法选择任何文本。事实证明,在检查器中仍然有一个Iframe在所有可以删除的东西之上。-这适用于运行一个开发版本,npm run start,我不确定它是否适用于生产版本。

我必须说,在我看来,这种突然的变化真的没有经过很好的考虑!

方法1

开放项目/ node_modules react-scripts / config / webpack.config.js 在回退中添加"crypto": require.resolve("crypto-browserify")

resolve: {
   fallback: {
       "crypto": require.resolve("crypto-browserify")
   }
} 

安装npm i crypto-browserify 重新启动应用程序。

如果你提交,上面的方法是无效的,因为我们不是node_modules

方法2

安装补丁包:纱线添加补丁包 安装所需的填料。(做一个应用程序的初始构建,它会告诉你。) 修改node_modules / react-scripts / config / webpack.config.js。举个例子。这是从Webpack的文档中截取的。

module.exports = {
  //...
  resolve: {
    fallback: {
      assert: require.resolve('assert'),
      buffer: require.resolve('buffer'),
      console: require.resolve('console-browserify'),
      constants: require.resolve('constants-browserify'),
      crypto: require.resolve('crypto-browserify'),
      domain: require.resolve('domain-browser'),
      events: require.resolve('events'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      os: require.resolve('os-browserify/browser'),
      path: require.resolve('path-browserify'),
      punycode: require.resolve('punycode'),
      process: require.resolve('process/browser'),
      querystring: require.resolve('querystring-es3'),
      stream: require.resolve('stream-browserify'),
      string_decoder: require.resolve('string_decoder'),
      sys: require.resolve('util'),
      timers: require.resolve('timers-browserify'),
      tty: require.resolve('tty-browserify'),
      url: require.resolve('url'),
      util: require.resolve('util'),
      vm: require.resolve('vm-browserify'),
      zlib: require.resolve('browserify-zlib'),
    },
  },
};

不要添加所有的,只添加你需要的。

在修改webpack之前,请确保先安装这些包 配置。

运行yarn patch-package react-scripts。这将生成一个补丁(这应该在你的回购中提交)。 向包中添加postinstall脚本。Json: "postinstall": "yarn patch-package"。现在,任何时候,有人在这个项目上安装npm deps,都会自动应用你在步骤3中创建的补丁。

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postinstall": "yarn patch-package"
  },