原创

解决webpack5不支持web3


报错信息

https://web03-1252477692.cos.ap-guangzhou.myqcloud.com/blog/images/QQ%E6%88%AA%E5%9B%BE20220608113715.png

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 polyfil for it.If you want to include a polyfill,you need to:
- add a fallback 'resolve.fallback: i "path": require.resolve("path-browserify")}
- install ' path-browserify'
If you don't want to include a polyfill,you can use an empty module like this:
resolve.fallback: i "path": false }
./webpack/webpack.dev.js 12:21-51

...

解决方式1

遗弃webpack5,将其改为webpack@4.46.0react-scripts@4.0.3

  • 这个改动代价是巨大的,还可能涉及一系列依赖需要版本调整

解决方式2

1、根目录新建config-overrides.js

config-overrides.js

/* config-overrides.js */
const webpack = require('webpack');
module.exports = function override(config, env) {
  //do stuff with the webpack config...

  config.resolve.fallback = {
    url: require.resolve('url'),
    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.module.rules = [
    ...config.module.rules,
    {
      test: /\.m?js/,
      resolve: {
        fullySpecified: false,
      },
    },
  ]
  config.plugins.push(
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer'],
    }),
  );

  return config;
}

2、下载相关依赖

package.json

"customize-cra": "^1.0.0",
"https-browserify": "^1.0.0",
"os-browserify": "^0.3.0",
"react-app-rewired": "^2.2.1",
"stream-browserify": "^3.0.0",

3、修改启动方式

"start": "react-app-rewired start",
"build": "react-app-rewired build",
  • 方式2如果遇到错误,可删除package-lock.json和node_modules重试

参考地址

How to Polyfill node core modules in webpack 5

https://stackoverflow.com/questions/64557638/how-to-polyfill-node-core-modules-in-webpack-5

Error: Can't resolve 'process/browser'

https://github.com/microsoft/PowerBI-visuals-tools/issues/365

webpack
  • 作者:零三(联系作者)
  • 最后更新时间:2022-06-08 14:46
  • 版权声明:自由转载-非商用-非衍生-保持署名
  • 转载声明:来源地址 https://web03.cn