breaking change webpack 5 used to include polyfills for node.js

Concerned Chimpanzee answered on November 20, 2022 Popularity 9/10 Helpfulness 5/10

answer breaking change webpack 5 used to include polyfills for node.js

related BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. reactjs

breaking change webpack 5 used to include polyfills for node.js

Comment

// breaking change webpack 5 used to include polyfills for node.js

// 1 - install react-app-rewired
// 2 - install what ever error show you to install, 
//for example my error show me to install (crypto-browserify) for crypto key

// 3 - create file (config-overrides.js)
// 4 - and inside the (config-overrides.js) add this code:

module.exports = function override (config, env) {
    console.log('override')
    let loaders = config.resolve
    loaders.fallback = {
        "fs": false,
        "tls": false,
        "net": false,
        "http": require.resolve("stream-http"),
        "https": false,
        "zlib": require.resolve("browserify-zlib") ,
        "path": require.resolve("path-browserify"),
        "stream": require.resolve("stream-browserify"),
        "util": require.resolve("util/"),
        "crypto": require.resolve("crypto-browserify") // see here this was my error
    }
    
    return config
}


// 5 - open the package.json file and rewrite start key
// from react-app start -> react-app-rewired start
// ----------------------------------------------------------------------
// and done problem solved

Popularity 9/10 Helpfulness 5/10 Language typescript

Source: stackoverflow.com

Tags: include node.js polyfills typescript webpack-5

Link to this answer
Share Copy Link

Contributed on Nov 20 2022

Concerned Chimpanzee

0 Answers Avg Quality 2/10

Closely Related Answers

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. reactjs

Comment

//Install react-app-rewired into your application:

npm install --save-dev react-app-rewired

//Check for the missing libraries in your build and included packages, and accordingly polyfill them.
//For Web3Auth, you just need to polyfill the buffer and process libraries

npm install --save-dev buffer process

//CAUTION
//There might be a possibility that you might need to polyfill more libraries, 
//in case you're using any other blockchain library alongside Web3Auth that requires them. 
//Generally the libraries like crypto-browserify, stream-browserify, browserify-zlib, 
//assert, stream-http, https-browserify, os-browserify, url are the ones that might be required.
//crypto-browserify and stream-browserify being the most common polyfills.

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


const webpack = require("webpack");

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    crypto: false, // require.resolve("crypto-browserify") can be polyfilled here if needed
    stream: false, // require.resolve("stream-browserify") can be polyfilled here if needed
    assert: false, // require.resolve("assert") can be polyfilled here if needed
    http: false, // require.resolve("stream-http") can be polyfilled here if needed
    https: false, // require.resolve("https-browserify") can be polyfilled here if needed
    os: false, // require.resolve("os-browserify") can be polyfilled here if needed
    url: false, // require.resolve("url") can be polyfilled here if needed
    zlib: false, // require.resolve("browserify-zlib") can be polyfilled here if needed
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ]);
  config.ignoreWarnings = [/Failed to parse source map/];
  config.module.rules.push({
    test: /\.(js|mjs|jsx)$/,
    enforce: "pre",
    loader: require.resolve("source-map-loader"),
    resolve: {
      fullySpecified: false,
    },
  });
  return config;
};


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


"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},
  
//The missing Nodejs polyfills should be included now 
 //and your app should be functional with web3.

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: web3auth.io

Tags: core

Link to this answer
Share Copy Link

Contributed on Sep 02 2023

Alien0w0

0 Answers Avg Quality 2/10

breaking change webpack 5 used to include polyfills for node.js

Contents

More Related Answers

breaking change webpack 5 used to include polyfills for node.js

Closely Related Answers

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. reactjs

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.