React App Polyfill Issue

[jackbl1]

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?

[shahbaz17]

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

[jackbl1]

Yes I have, this worked for all polyfill issues except for the process/browser error

[samyap4]

I seeing the same error on my side. I am trying to configure the sample react app with my own auth0 implementation.

[himanshuchawla009]

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

[himanshuchawla009]

Have you tried adding above lines ?

[himanshuchawla009]

please share your entire config file.

[aarav1656]

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;
};
config.module.rules.unshift({
test: /.m?js$/,
resolve: {
fullySpecified: false, // disable the behavior
},
})

[Saviour1001]

Change your config file to this and try to build again.

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"],
    }),
  ]);
  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;
};

[jackbl1]

solved. Thank you :)