React App Polyfill Issue

[Legacy] GitHub Discussions
1

Hi, I've added web3auth to a React app I built, and even with the polyfills described here I am still seeing this error with process/browser

_ERROR in ./node_modules/async/dist/async.mjs 71:25-32

Module not found: Error: Can't resolve 'process/browser' in '.../node_modules/async/dist'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request._

I've double checked, my config-overrides file includes the line

config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: "process/browser",
Buffer: ["buffer", "Buffer"],
}),
]);

anyone else experiencing this issue?



Originally posted by: jackbl1

Check the discussion at: https://github.com/orgs/Web3Auth/discussions/795
2

Hey @jackbl1

Have you looked into https://web3auth.io/docs/troubleshooting/webpack-issues#react? If not, can you try implementing the solution mentioned there?

  • Install react-app-rewired and add the missing modules to your application.

    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:

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



Originally posted by: shahbaz17
3

Please add following lines in your webpack config :

config.module.rules.unshift({
    test: /\.m?js$/,
    resolve: {
      fullySpecified: false, // disable the behavior
    },
  })

or process/browser as alias, for ex:

 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"),
    'process/browser': require.resolve('process/browser')
  });


Originally posted by: himanshuchawla009