Sucede conmigo mientras reinstalo los módulos de nodo, mi versión actual del paquete web es 5.38.1 , solucioné el problema con npm i path-browserify -D después de la instalación, debe actualizar su webpack.config.js resolve{} con fallback: {"fs": false, "path": require.resolve("path-browserify")} mientras no se usa "fs": false , muestra errores, es decir: Module not found: Error: Can't resolve 'fs' in '/YOUR DIRECTORY ...' así que no olvides agregarlo; con otras cosas se ve como:

 module.exports = { ... resolve: { extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],// other stuff fallback: { "fs": false, "path": require.resolve("path-browserify") } }, };

elimine la propiedad del node si existe en su archivo webpack.config.js

quieres usar en

 const nodeExternals = require('webpack-node-externals');

agregar en webpack.config.js

 target: "node", devtool: "source-map", externals: [nodeExternals()],

ERROR: [webpack < 5 solía incluir polyfills para los módulos principales de node.js de forma predeterminada.

Este ya no es el caso. Verifique si necesita este módulo y configure un polyfill para él.

Respuesta: node_modules > react-scripts > config > webpack.config.js

Agregue el archivo webpack.config.js:

 resolve: { fallback: { "http": require.resolve("stream-http") , "path": require.resolve("path-browserify") }, }

Mi entorno es así:

• Reaccionar => v17
• Reaccionar secuencias de comandos => v5
• paquete web => v5

Para solucionar el problema, siga las instrucciones a continuación

1- Instalar los siguientes paquetes

 yarn add fs assert https-browserify os os-browserify stream-browserify stream-http react-app-rewired

2- Cree config-coverrides.js en el directorio raíz de su proyecto al lado del paquete.json

añádele el siguiente código:

 const webpack = require('webpack'); module.exports = function override(config, env) { config.resolve.fallback = { url: require.resolve('url'), fs: require.resolve('fs'), 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; }

3- Cambia los paquetes.js como el siguiente

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

Necesita React => v17 React scripts => v5 webpack => v5

Para arreglar el problema

1) Instalar

 "fs": "^2.0.0", // npm i fs "assert": "^2.0.0", // npm i assert "https-browserify": "^1.0.0", // npm i https-browserify "os": "^0.1.2", // npm i os "os-browserify": "^0.3.0", // npm i os-browserify "react-app-rewired": "^2.1.9", //npm i react-app-rewired "stream-browserify": "^3.0.0", // stream-browserify "stream-http": "^3.2.0", //stream-http

2) Crear config-overrides.js en la imagen del directorio raíz

3) Agregar configuraciones a config-overrides.js

 const webpack = require('webpack'); module.exports = function override(config, env) { config.resolve.fallback = { url: require.resolve('url'), fs: require.resolve('fs'), 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; }

3) Cambiar paquetes.json

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

Problema resuelto :)

Create React App acaba de lanzar v5 que ahora implementa Webpack v5. Esto va a romper por completo muchas bibliotecas que incluyen web3, ya que faltarán los polyfills de la biblioteca principal de Node.

Para resolver esto rápidamente, puede cambiar esto en su paquete.json:

 "react-scripts": "^5.0.0"

A esto

 "react-scripts": "4.0.3"

Después de este:

 rm -r node_modules rm package-lock.json npm install

Mi aplicación arrojó el mismo error ayer. Pasé horas leyendo preguntas/respuestas aquí en SO y probando algunas. Lo que me ha funcionado es esto:

https://github.com/ChainSafe/web3.js#troubleshooting-and-known-issues

Si es Twilio, usas:

El módulo Twilio no está diseñado para usarse en JavaScript del lado del cliente, por lo que falla para su aplicación Angular. Twilio usa su SID de cuenta y su token de autenticación, el uso en el lado del cliente representa un riesgo; Entonces, lo mejor es usarlo en el lado del servidor y usar la API.

npm install assert --save npm install buffer --save

Para cualquiera que tenga un problema similar, simplemente instale los módulos que faltan. Se informa que faltan estos módulos porque son parte de node.js, pero también están disponibles por separado a través de npm.

Enfrenté este problema con create-react-app que por defecto me dio

 "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", "web-vitals": "^2.1.2"

Lo arreglé simplemente cambiando react-scripts a la versión 4.0.3 .

Me gusta mantener las cosas simples, no es necesario ejecutar npm run-script eject hasta aquí, así que vuelvo a bajar de categoría a react-scripts@4.0.3 en lugar de 5.0.0 Hasta ahora, esto todavía no está solucionado en Webpack

Lamentablemente, porque eso incluye un montón de paquetes retirados.

Según la documentación de Web3 :

Si está utilizando la versión de crear-reaccionar-aplicación> = 5, es posible que tenga problemas para construir. Esto se debe a que los polyfills de NodeJS no están incluidos en la última versión de create-react-app.

Solución:

Instale react-app-rewired y los módulos que faltan

Si estás usando hilo:

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

Si está utilizando npm:

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

Cree config-overrides.js en la raíz de la carpeta de su proyecto con el contenido:

 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; }

Dentro de package.json, cambie el campo de secuencias de comandos para iniciar, compilar y probar. En lugar de react-scripts, reemplácelo con react-app-rewired antes:

 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },

después:

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

Los polyfills de Nodejs que faltan deben incluirse ahora y su aplicación debe funcionar con web3.

Si desea ocultar las advertencias creadas por la consola:

En config-overrides.js dentro de la función de anulación, agregue:

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

Método 1

• Abra project/node_modules/react-scripts/config/webpack.config.js

• En reserva, agregue "crypto": require.resolve("crypto-browserify")

 resolve: { fallback: { "crypto": require.resolve("crypto-browserify") } }

• Instalar npm i crypto-browserify
• Reinicie su aplicación.

El método anterior no funciona si te comprometes ya que no somos node_modules

Método 2

• Instalar el paquete de parches: yarn add patch-package

• Instale los pollyfills necesarios (haga una compilación inicial de su aplicación y se lo dirá).

• Modifique node_modules/react-scripts/config/webpack.config.js. Aquí hay un ejemplo . Esto está tomado de los documentos de Webpack.

 module.exports = { //... resolve: { fallback: { assert: require.resolve('assert'), buffer: require.resolve('buffer'), console: require.resolve('console-browserify'), constants: require.resolve('constants-browserify'), crypto: require.resolve('crypto-browserify'), domain: require.resolve('domain-browser'), events: require.resolve('events'), http: require.resolve('stream-http'), https: require.resolve('https-browserify'), os: require.resolve('os-browserify/browser'), path: require.resolve('path-browserify'), punycode: require.resolve('punycode'), process: require.resolve('process/browser'), querystring: require.resolve('querystring-es3'), stream: require.resolve('stream-browserify'), string_decoder: require.resolve('string_decoder'), sys: require.resolve('util'), timers: require.resolve('timers-browserify'), tty: require.resolve('tty-browserify'), url: require.resolve('url'), util: require.resolve('util'), vm: require.resolve('vm-browserify'), zlib: require.resolve('browserify-zlib'), }, }, };

• No los agregues todos, agrega solo los que necesites.

Asegúrese de instalar los paquetes primero antes de modificar la configuración del paquete web.

• Ejecute yarn patch-package react-scripts . Esto generará un parche (esto debe confirmarse en su repositorio en el futuro).

• Agregue un script de postinstalación a package.json: "postinstall": "yarn patch-package" . Ahora, cada vez que alguien instale npm deps en este proyecto, el parche que creó en el paso 3 se aplicará automáticamente.

 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "postinstall": "yarn patch-package" },

Con create-react-app v17 y scripts 5.0.0, debe agregar un respaldo a su webpack.config.js e instalar el 'proceso'.

 `module.exports = function (webpackEnv) { ......... return { ......... resolve: { .......... fallback: { "process": require.resolve("process/browser") },`

La respuesta de Secret casi funcionó para mí (¡todavía no tengo suficiente reputación para comentar allí, lo siento!)

Después de haber seguido los pasos en su respuesta, me dijo que debido a la diferencia en las versiones requeridas de eslint, debería agregar SKIP_PREFLIGHT_CHECK=true a un archivo .env en el proyecto, así que lo agregué a mi existente.

Luego se construiría con éxito (¡finalmente!) Pero luego noté, al menos en Chrome, que no podía hacer clic en nada ni seleccionar ningún texto. Resulta que todavía hay un Iframe encima de todo lo que se puede eliminar en Inspector. - Esto se aplica cuando se ejecuta una compilación de desarrollo, npm run start , no estoy seguro de si lo hace en una compilación de producción.

¡Debo decir que este cambio repentino, en mi opinión, realmente no ha sido muy bien pensado!

Estoy usando create-react-app con craco y encontré los siguientes errores al actualizar a webpack 5:

'buffer'

 Module not found: Error: Can't resolve 'buffer' in '/Users/geek.neo/propolis-portal/node_modules/safe-buffer' 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: { "buffer": require.resolve("buffer/") }' - install 'buffer' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "buffer": false }

Esto se resolvió simplemente instalando el paquete de búfer con npm install -D buffer .

'fs'

 Module not found: Error: Can't resolve 'fs' in '/Users/geek.neo/propolis-portal/node_modules/line-navigator'

Esto se resolvió configurando un respaldo de paquete web en la configuración de craco.config.js :

 module.exports = { style: { postcssOptions: { plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, webpack: { configure: (webpackConfig, { env, paths }) => { // eslint-disable-next-line no-param-reassign webpackConfig.resolve.fallback = { fs: false, }; return webpackConfig; }, }, }

Esto está sucediendo con la nueva actualización de vue-cli (v5). Para solucionarlo (la forma de módulos vacíos), debe cambiar vue.config.js de esta manera:

 configureWebpack: (config) => { config.resolve.fallback = { ...config.resolve.fallback, // Include here the "empty" modules url: false, util: false, querystring: false, https: false, }; }

Creo que la mayoría de las respuestas aquí resolverían su problema. Sin embargo, si no necesita Polyfills para el desarrollo de su nodo, sugiero usar target: 'node' en la configuración de su módulo Webpack. Esto ayudó a resolver el problema para mí.

Aquí hay alguna documentación sobre la respuesta: https://webpack.js.org/concepts/targets/

También recibí estos errores al actualizar de webpack v4 a v5. Resuelto haciendo los siguientes cambios en webpack.config.js

propiedad resolve.fallback añadida

propiedad de nodo eliminada

 { resolve: { modules: [...], fallback: { "fs": false, "tls": false, "net": false, "path": false, "zlib": false, "http": false, "https": false, "stream": false, "crypto": false, "crypto-browserify": require.resolve('crypto-browserify'), //if you want to use this module also don't forget npm i crypto-browserify } }, entry: [...], output: {...}, module: { rules: [...] }, plugins: [...], optimization: { minimizer: [...], }, // node: { // fs: 'empty', // net: 'empty', // tls: 'empty' // }, }

actualizar de v4 a v5 => https://webpack.js.org/migrate/5/#clean-up-configuration

npm install path-browserify y luego intente cambiar la configuración del paquete web para incluir:

 module.exports = { ... resolve: { alias: { path: require.resolve("path-browserify") } } };

Parece que ha utilizado el paquete de path que no está incluido en las compilaciones de paquetes web de forma predeterminada. Para mí, extender la configuración del paquete web de esta manera ayudó:

 { // rest of the webpack config resolve: { // ... rest of the resolve config fallback: { "path": require.resolve("path-browserify") } }, }

También instale path-browserify a través de npm install path-browserify --save-dev o yarn add path-browserify --dev si está usando yarn.

Lea el soporte para los módulos principales de Node.js con node-polyfill-webpack-plugin :

Con el paquete instalado, agregue lo siguiente a su webpack.config.js:

 const NodePolyfillPlugin = require("node-polyfill-webpack-plugin") module.exports = { // Other rules... plugins: [ new NodePolyfillPlugin() ] }