[JavaScript知识库]create-react-app 脚手架 TS类型引入 web3.js报错

TypeScript 引入出错，普通js不晓得

解决方法

Web3 and Create-react-app

If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.

Solution

Install react-app-rewired and the missing modules

1.下载以下依赖

yarn：

If you are using yarn:

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

npm：

If you are using npm:

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

Create config-overrides.js in the root of your project folder with the content

2.在根目录下创建 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;
}

3.更改package.json中的内容

Within package.json change the scripts field for start, build and test. Instead of react-scripts replace it with react-app-rewired

before:

更改前：

“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”
},
after:

更改后：

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

4.关闭终端中的警告

The missing Nodejs polyfills should be included now and your app should be functional with web3.

If you want to hide the warnings created by the console:
In config-overrides.js within the override function, add:

在 config-overrides.js 的override 方法中添加如下代码

config.ignoreWarnings = [/Failed to parse source map/];
以上内容都是web3 git上的处理方法

亲测试有效果