Проблемы с web3 и webpack v5
Попытка импортировать web3 в App.js выдает 9 ошибок
import React from "react";
import Web3 from "web3";
function App() {
return (
<div className = "App">
<h1>TEST APP</h1>
</div>
);
}
export default App;
Compiled with problems:X
ERROR in ./node_modules/cipher-base/index.js 3:16-43
Module not found: Error: Can't resolve 'stream' in '/home/galich/Desktop/projects/mp-test/node_modules/cipher-base'
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: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false }
ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227
Module not found: Error: Can't resolve 'crypto' in '/home/galich/Desktop/projects/mp-test/node_modules/eth-lib/lib'
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: { "crypto": require.resolve("crypto-browserify") }' - install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false }
ERROR in ./node_modules/web3-eth-accounts/lib/index.js 31:74-91
Module not found: Error: Can't resolve 'crypto' in '/home/galich/Desktop/projects/mp-test/node_modules/web3-eth-accounts/lib'
и т. д.
Пожалуйста помоги
Ответы 1
1-й вариант:
Установите NodePolyfillPlugin и Реакция-приложение-перемонтировано с помощью npm install react-app-rewired node-polyfill-webpack-plugin или yarn add react-app-rewired node-polyfill-webpack-plugin.
Теперь измените "start": "react-scripts start" на "start": "react-app-rewired start".
Создайте файл "config-overrides.js" и напишите в нем следующий код:
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = function override(config, _env) {
config.plugins.push(
new NodePolyfillPlugin({
excludeAliases: ["console"],
})
);
return config;
};
Теперь делайте "npm start" и Ура!!!
2-й вариант:
Вместо импорта, например:
import Web3 from "web3";
Импортировать так:
import Web3 from "web3/dist/web3.min.js";
Это также решит вашу проблему.