> For the complete documentation index, see [llms.txt](/llms.txt).

# Bundler Polyfill issues - Webpack 5

warning

React's development team has officially **deprecated** Create React App (CRA) and Webpack. For more information, please refer to [_this Pull Request_](https://github.com/reactjs/react.dev/pull/5487).

While Embedded Wallet's Web3Auth libraries are compatible with CRA, there is a possibility that certain functionalities may not work as expected due to sub-dependencies. We recommend using Vite to set up your React app.

Learn more about [how to migrate from Create React App to Vite](https://builder.metamask.io/t/how-to-migrate-from-create-react-app-to-vite/1211).

While setting up a new Web3 project from scratch, you might face bundler issues. This can occur because the core packages like `eccrypto` have dependencies which are not present within the build environment.

To rectify this, the go-to method is to add the missing modules directly into the package, and edit the bundler configuration to use those. Although this approach works, it can significantly increase bundle size, leading to slower load times and a degraded user experience.

Some libraries rely on environment-specific modules that may be available at runtime in the browser even if they are not bundled. Libraries such as Embedded Wallets' Web3Auth take advantage of this behavior and can function correctly without bundling all modules. However, if you are using a library that does not take advantage of this, you might face issues.

To avoid unnecessary overhead, include only the required polyfills, test functionality, and configure your bundler to ignore unresolved modules rather than including them in the final build.

tip

We recommend that you require certain Node polyfills to be added to your project, while testing each of its functionalities. At the same time, instruct the bundler to ignore the missing modules, and not include them in the build.

In this guide, we provide instructions for adding polyfills in of some of the most commonly used web frameworks:

- [React](#react)
- [Angular](#angular)
- [Vue.js](#vuejs)
- [Gatsby](#gatsby)

## React[​](#react "Direct link to React")

For Create React App (CRA):

1. Install `react-app-rewired` into your application:

- npm
- Yarn
- pnpm
- Bun

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

```

```
yarn add --dev react-app-rewired

```

```
pnpm add --save-dev react-app-rewired

```

```
bun add --dev react-app-rewired

```

1. 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
- Yarn
- pnpm
- Bun

```
npm install --save-dev buffer process

```

```
yarn add --dev buffer process

```

```
pnpm add --save-dev buffer process

```

```
bun add --dev buffer process

```

warning

If you're using any other blockchain library alongside Web3Auth, it's possible that you might need to polyfill more libraries. Typically, the libraries like `crypto-browserify`, `stream-browserify`, `browserify-zlib`, `assert`, `stream-http`, `https-browserify`, `os-browserify`, `url`are the ones that might be required, with `crypto-browserify` and `stream-browserify` being the most common polyfills.

1. 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
}

```

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

- before
- after

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

```

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

```

The missing Node.js polyfills should be included now and your app should be compatible with Embedded Wallet's Web3Auth.

note

If you're using `craco`, similar changes need to be made to `craco.config.js`

## Angular[​](#angular "Direct link to Angular")

1. Check for the missing libraries in your build and included packages, and polyfill these. For Web3Auth, you need the `buffer` and `process` libraries. For the rest of the libraries, we are installing a dummy module called `empty-module` which quiets the warnings while building the project.

- npm
- Yarn
- pnpm
- Bun

```
npm install --save-dev buffer process empty-module

```

```
yarn add --dev buffer process empty-module

```

```
pnpm add --save-dev buffer process empty-module

```

```
bun add --dev buffer process empty-module

```

warning

If you're using any other blockchain library alongside Web3Auth, it's possible that you might need to polyfill more libraries. Typically, the libraries like `crypto-browserify`, `stream-browserify`, `browserify-zlib`, `assert`, `stream-http`, `https-browserify`, `os-browserify`, `url`are the ones that might be required, with `crypto-browserify` and `stream-browserify` being the most common polyfills.

Within `tsconfig.json` add the following `paths` in `compilerOptions` so Webpack can get the correct dependencies:

```
{
  "compilerOptions": {
    "paths" : {
      "crypto": ["./node_modules/empty-module"], // crypto-browserify can be polyfilled here if needed
      "stream": ["./node_modules/empty-module"], // stream-browserify can be polyfilled here if needed
      "assert": ["./node_modules/empty-module"], // assert can be polyfilled here if needed
      "http": ["./node_modules/empty-module"], // stream-http can be polyfilled here if needed
      "https": ["./node_modules/empty-module"], // https-browserify can be polyfilled here if needed
      "os": ["./node_modules/empty-module"], // os-browserify can be polyfilled here if needed
      "url": ["./node_modules/empty-module"], // url can be polyfilled here if needed
      "zlib": ["./node_modules/empty-module"], // browserify-zlib can be polyfilled here if needed
      "process": ["./node_modules/process"],
    }
  }
}

```

1. Add the following lines to `polyfills.ts` file:

```
;(window as any).global = window
global.Buffer = global.Buffer || require('buffer').Buffer
global.process = global.process || require('process')

```

## Vue.js[​](#vuejs "Direct link to Vue.js")

1. 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
- Yarn
- pnpm
- Bun

```
npm install --save-dev buffer process

```

```
yarn add --dev buffer process

```

```
pnpm add --save-dev buffer process

```

```
bun add --dev buffer process

```

warning

If you're using any other blockchain library alongside Web3Auth, it's possible that you might need to polyfill more libraries. Typically, the libraries like `crypto-browserify`, `stream-browserify`, `browserify-zlib`, `assert`, `stream-http`, `https-browserify`, `os-browserify`, `url`are the ones that might be required, with `crypto-browserify` and `stream-browserify` being the most common polyfills.

1. Add the following lines to `vue.config.js`

```
const { defineConfig } = require('@vue/cli-service')
const { ProvidePlugin } = require('webpack')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  configureWebpack: config => {
    config.devtool = 'source-map'
    config.resolve.symlinks = false
    config.resolve.fallback = {
      crypto: false, // crypto-browserify can be polyfilled here if needed
      stream: false, // stream-browserify can be polyfilled here if needed
      assert: false, // assert can be polyfilled here if needed
      os: false, // os-browserify can be polyfilled here if needed
      https: false, // https-browserify can be polyfilled here if needed
      http: false, // stream-http can be polyfilled here if needed
      url: 'url', // url is needed if using `signer.provider.send` method for signing from ethers.js
      zlib: false, // browserify-zlib can be polyfilled here if needed
    }
    config.plugins.push(new ProvidePlugin({ Buffer: ['buffer', 'Buffer'] }))
    config.plugins.push(new ProvidePlugin({ process: ['process/browser'] }))
    config.plugins.push(
      new BundleAnalyzerPlugin({
        analyzerMode: 'disabled',
      })
    )
  },
})

```

## Gatsby[​](#gatsby "Direct link to Gatsby")

#### Can't resolve object.assign/polyfill[​](#cant-resolve-objectassignpolyfill "Direct link to Can't resolve object.assign/polyfill")

1. Check for the missing libraries in your build and included packages, and polyfill these. For Web3Auth, you need to polyfill the `buffer` and `process` libraries:

- npm
- Yarn
- pnpm
- Bun

```
npm install --save-dev buffer process

```

```
yarn add --dev buffer process

```

```
pnpm add --save-dev buffer process

```

```
bun add --dev buffer process

```

warning

If you're using any other blockchain library alongside Web3Auth, it's possible that you might need to polyfill more libraries. Typically, the libraries like `crypto-browserify`, `stream-browserify`, `browserify-zlib`, `assert`, `stream-http`, `https-browserify`, `os-browserify`, `url`are the ones that might be required, with `crypto-browserify` and `stream-browserify` being the most common polyfills.

1. Add the following lines to `gatsby-node.js`

```
exports.onCreateWebpackConfig = ({ actions, plugins, getConfig }) => {
  const webpack = require('webpack')
  const path = require('path')
  const config = getConfig()
  if (config.externals && config.externals[0]) {
    config.externals[0]['node:crypto'] = require.resolve('crypto-browserify')
  }
  actions.setWebpackConfig({
    ...config,
    resolve: {
      fallback: {
        crypto: false,
        stream: false,
        assert: require.resolve('assert/'),
        http: false,
        https: false,
        os: false,
        url: false,
        zlib: false,
        'object.assign/polyfill': path.resolve('./node_modules/object.assign/polyfill.js'),
      },
    },
    plugins: [
      plugins.provide({ process: 'process/browser' }),
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
      }),
    ],
  })
}

```