根据Web3文档:

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

解决方案:

安装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-override .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;
}

内包。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 polyfills现在应该包括在内，你的应用程序应该可以使用web3。

如果你想隐藏控制台创建的警告:

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

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

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

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

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

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

根据Web3文档:

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

解决方案:

安装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-override .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;
}

内包。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 polyfills现在应该包括在内，你的应用程序应该可以使用web3。

如果你想隐藏控制台创建的警告:

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

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

Create React App刚刚发布了v5，现在实现了Webpack v5。这将完全打破许多库，其中包括web3作为必需的节点核心库腻子将会丢失。

为了快速解决这个问题，你可以在package.json中修改这个:

"react-scripts": "^5.0.0"

这个

"react-scripts": "4.0.3"

在这之后:

rm -r node_modules

rm package-lock.json

npm install

我在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版本来解决这个问题。

我的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'
  ]

})