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

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


当前回答

方法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"
  },

其他回答

当我重新安装节点模块时,我的webpack当前版本是5.38.1,我已经修复了这个问题 安装后,你必须更新你的webpack.config.js resolve{} with 回退:{"fs": false, "path": require.resolve("path-browserify")}而不使用"fs": false它显示错误,即:模块未找到:错误:无法解析'fs'在'/YOUR DIRECTORY…' 所以别忘了加上它;与其他东西看起来像:

module.exports = {
   ...
   resolve: {
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],// other stuff
    fallback: {
      "fs": false,
      "path": require.resolve("path-browserify")
    }
  },
};

如果你的webpack.config.js文件中存在node属性,删除它

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

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

方法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"
  },

新的vue-cli升级(v5)就是这样。为了修复它(空模块的方式),你必须这样改变vue.config.js:

configureWebpack: (config) => {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    // Include here the "empty" modules
    url: false,
    util: false,
    querystring: false,
    https: false,
  };
}

对于我(使用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修复了这个问题。