如何在 webpack 5 中填充节点核心模块

Question

webpack 5 不再对节点核心模块进行自动填充。请问怎么修？PS：我是开发的初学者，所以必须为我很好地描述解决方案。

Answer 1

根据Web3 文档：

如果您使用的 create-react-app 版本 >=5，您可能会遇到构建问题。这是因为最新版本的 create-react-app 中不包含 NodeJS polyfill。

解决方案：

安装react-app-rewired和缺少的模块

如果您使用的是纱线：

yarn add --dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

如果您使用 npm：

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

在项目文件夹的根目录中创建 config-overrides.js，内容如下：

const webpack = require('webpack');

module.exports = function override(config) {
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "assert": require.resolve("assert"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "os": require.resolve("os-browserify"),
        "url": require.resolve("url")
    })
    config.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer']
        })
    ])
    return config;
}

在 package.json 中更改启动、构建和测试的脚本字段。之前用react-app-rewired代替react-scripts：

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

后：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

现在应该包含缺少的 Nodejs polyfill，并且您的应用程序应该可以与 web3 一起使用。

如果您想隐藏控制台创建的警告：

在 config-overrides.js 的 override 函数中，添加：

config.ignoreWarnings = [/Failed to parse source map/];

Answer 2

我遇到了这个问题，create-react-app默认情况下给了我

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

我通过更改react-scripts为 version 来修复它4.0.3。

Answer 3

从 webpack v4 升级到 v5 时，我也遇到了这些错误。已解决

添加了 resolve.fallback 属性

删除节点属性

{
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

Answer 4

读取对 Node.js 核心模块的支持node-polyfill-webpack-plugin：

安装包后，将以下内容添加到您的 webpack.config.js：

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

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

Answer 5

我认为这里的大多数答案都可以解决您的问题。但是，如果您的节点开发不需要 Polyfills，那么我建议target: 'node'在您的 Webpack 模块配置中使用。这有助于解决我的问题。

这是有关答案的一些文档：https : //webpack.js.org/concepts/targets/

Answer 6

你需要 React => v17 React script=> v5 webpack => v5

解决问题

1）安装

"fs": "^2.0.0",  // npm i fs
"assert": "^2.0.0",  // npm i assert
"https-browserify": "^1.0.0", // npm i https-browserify
"os": "^0.1.2", // npm i os
"os-browserify": "^0.3.0", // npm i os-browserify
"react-app-rewired": "^2.1.9", //npm i react-app-rewired
"stream-browserify": "^3.0.0", // stream-browserify
"stream-http": "^3.2.0", //stream-http

2）在根目录Image中创建config-overrides.js

3）将配置添加到config-overrides.js

const webpack = require('webpack');
module.exports = function override(config, env) {
    config.resolve.fallback = {
        url: require.resolve('url'),
        fs: require.resolve('fs'),
        assert: require.resolve('assert'),
        crypto: require.resolve('crypto-browserify'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify/browser'),
        buffer: require.resolve('buffer'),
        stream: require.resolve('stream-browserify'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

3）更改packages.json

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-app-rewired eject"
}

问题解决了 ：）

Answer 7

Create React App 刚刚发布了 v5，现在实现了 Webpack v5。这将完全破坏包括 web3 在内的许多库，因为所需的 Node 核心库 polyfill 将丢失。

要快速解决此问题，您可以在 package.json 中更改此内容：

"react-scripts": "^5.0.0"

对此

"react-scripts": "4.0.3"

在这之后：

rm -r node_modules

rm package-lock.json

npm install

Answer 8

当我重新安装节点模块时，我的 webpack 当前版本是5.38.1，我已经解决了这个问题， npm i path-browserify -D安装后你必须更新你的webpack.config.js resolve{}而不 fallback: {"fs": false, "path": require.resolve("path-browserify")}使用"fs": false它显示错误，即：Module not found: Error: Can't resolve 'fs' in '/YOUR DIRECTORY ...' 所以不要忘记添加它；与其他东西看起来像：

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

删除文件node中存在的属性webpack.config.js

Answer 9

看起来您使用了path默认情况下未包含在 webpack 构建中的包。对我来说，像这样扩展 webpack 配置有帮助：

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

还安装path-browserify通过npm install path-browserify --save-dev或者yarn add path-browserify --dev如果你使用的纱线。

Answer 10

方法一

• 打开project/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

方法二

• 安装补丁包：yarn add patch-package

• 安装所需的 pollyfills。（对您的应用程序进行初始构建，它会告诉您。）

• 调整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。这将生成一个补丁（这应该在您的存储库中提交）。

• 将安装后脚本添加到 package.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"
  },

Answer 11

我的#VUE 解决方案

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack');
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
      }),
      new webpack.ProvidePlugin({
          process: 'process/browser',
      })
    ],
    resolve: {
      fallback: {
        "os": require.resolve("os-browserify/browser"),
        "url": require.resolve("url/"),
        "crypto": require.resolve("crypto-browserify"),
        "https": require.resolve("https-browserify"),
        "http": require.resolve("stream-http"),
        "assert": require.resolve("assert/"),
        "stream": require.resolve("stream-browserify"),
        "buffer": require.resolve("buffer")
      }
    }
  },

  transpileDependencies: [
    'vuetify'
  ]

})

Answer 12

我的环境是这样的：

• 反应 => v17
• 反应脚本=> v5
• 网页包 => v5

要解决问题，请按照以下说明操作

1-安装以下软件包

yarn add fs assert https-browserify os os-browserify stream-browserify stream-http react-app-rewired

2-在项目的根目录中的 package.json 旁边创建config-coverrides.js

将以下代码添加到其中：

yarn add fs assert https-browserify os os-browserify stream-browserify stream-http react-app-rewired

3-更改packages.js，如下所示

const webpack = require('webpack');
module.exports = function override(config, env) {
    config.resolve.fallback = {
        url: require.resolve('url'),
        fs: require.resolve('fs'),
        assert: require.resolve('assert'),
        crypto: require.resolve('crypto-browserify'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify/browser'),
        buffer: require.resolve('buffer'),
        stream: require.resolve('stream-browserify'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

Answer 13

npm install path-browserify 然后尝试更改 webpack 配置以包括：

module.exports = {
    ...
    resolve: {
        alias: {
            path: require.resolve("path-browserify")
        }
    }
};

Answer 14

我正在使用create-react-appwith craco，升级到 webpack 5 时遇到以下错误：

'缓冲'

Module not found: Error: Can't resolve 'buffer' in '/Users/therightstuff/my-project/node_modules/safe-buffer'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }

只需通过安装缓冲包即可解决此问题npm install -D buffer。

'fs'

Module not found: Error: Can't resolve 'fs' in '/Users/therightstuff/my-project/node_modules/line-navigator'

通过在 craco 配置中设置 webpack 后备解决了这个问题craco.config.js：

module.exports = {
    style: {
        postcssOptions: {
            plugins: [
            require('tailwindcss'),
            require('autoprefixer'),
            ],
        },
    },
    webpack: {
        configure: (webpackConfig, { env, paths }) => {
            // eslint-disable-next-line no-param-reassign
            webpackConfig.resolve.fallback = {
                fs: false,
            };
            return webpackConfig;
        },
    },
}