Antecedentes
Creé un nuevo proyecto React usando npx create-react-app client y encontré algunos problemas con Webpack 5. Originalmente, tuve errores con assert , os y stream , pero los solucioné al instalarlos e incluirlos en webpack.config.js . El archivo se encuentra en las carpetas client/src .
Así es como se ven los errores:
Compiled with problems: ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227 Module not found: Error: Can't resolve 'crypto' in 'C:\Users\Username\Projects\testProject\client\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-providers-http/lib/index.js 30:11-26 Module not found: Error: Can't resolve 'http' in 'C:\Users\Username\Projects\testProject\client\node_modules\web3-providers-http\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: { "http": require.resolve("stream-http") }' - install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false } ================================================================= ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28 Module not found: Error: Can't resolve 'https' in 'C:\Users\Username\Projects\testProject\client\node_modules\xhr2-cookies\dist' 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: { "https": require.resolve("https-browserify") }' - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }Código
Así es como se ve mi archivo webpack.config.js en este momento.
module.exports = { resolve: { fallback: { 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'), stream: require.resolve('stream-browserify'), }, }, }; A continuación se muestra mi archivo package.json .
{ "dependencies": { "assert": "^2.0.0", "crypto-browserify": "^3.12.0", "dotenv": "^10.0.0", "https-browserify": "^1.0.0", "os": "^0.1.2", "stream": "^0.0.2", "stream-http": "^3.2.0" } } Como se ve en lo anterior, instalé los paquetes sugeridos de los errores ( crypto-browserify , stream-http y https-browserify ) y los incluí en el archivo webpack.config.js . Sin embargo, los errores aún persisten.
¿Cómo puedo solucionar esto? ¡Gracias!
Además de lo anterior, usando el truco del paquete react-app-rewired.
Entonces, 1) Instale react-app-rewired 2) en packages.json reemplace react-scripts con react-app-rewired, por ejemplo
"start": "rimraf ./build && react-scripts start",se convierte
"start": "rimraf ./build && react-app-rewired start",copie y pegue esto en config-overrides.js (en la raíz de su aplicación)
// config-overrides.js module.exports = function override(config, env) { // Nueva configuración, por ejemplo, config.plugins.push... // console.log(JSON.stringify(config.resolve.fallback)) config.resolve.fallback = { crypto: false, util: false, stream: false, ...config.resolve.fallback };
devolver configuración}
Esto parece un problema nuevo con muchos paquetes, incluido web3, ya que estos no son compatibles con Webpack v5 sin agregar respaldos para los polyfils.
Problema señalado aquí: https://github.com/facebook/create-react-app/issues/11756
Resolví este problema agregando el respaldo a mi archivo webpack.config.js;
module.exports = { resolve: { fallback: { 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'), stream: require.resolve('stream-browserify'), }, }, };utilizando;
"dependencies": { "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", "web-vitals": "^2.1.2", "web3": "^1.6.1" },pero también necesito pero obtuve errores de compilación en el proceso de compilación:
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" erroresto se resolvió agregando a mi archivo .env;
GENERATE_SOURCEMAP=falseEn lugar de usar Webpack 5, una solución alternativa que encontré es bajar de categoría a webpack@4.46.0 y react-scripts@4.0.3 . Esto es lo que usaré por ahora hasta que pueda encontrar una mejor solución.
de alguna manera también lo arregló usando react-app-rewired Asegúrese de instalar este paquete y crear un nuevo archivo config-overrides.js en su directorio raíz
/* 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.plugins.push( new webpack.ProvidePlugin({ process: 'process/browser', Buffer: ['buffer', 'Buffer'], }), ); return config; }Ahora edite su paquete.json para hacer que react-app-rewired funcione.
//paquete.json
"dependencies": { "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "assert": "^2.0.0", "buffer": "^6.0.3", "crypto": "npm:crypto-browserify", "crypto-browserify": "^3.12.0", "https-browserify": "^1.0.0", "os-browserify": "^0.3.0", "react": "^17.0.2", "react-app-rewired": "^2.1.9", "react-dom": "^17.0.2", "react-scripts": "5.0.0", "rewire": "^6.0.0", "stream": "npm:stream-browserify", "stream-browserify": "^3.0.0", "stream-http": "^3.2.0", "url": "^0.11.0", "web-vitals": "^2.1.2", "web3": "^1.6.1" }, "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject" },