import { Callout } from 'nextra/components';

# Troubleshooting bundling with Webpack

## Webpack > 5 ESM

For any project using Webpack, you´ll need the following rule in your `webpack.config.js` above version 5:
```json
{
        test: /\.(m?js)$/,
        resolve: {
          fullySpecified: false
        }
}
```

### Create-react-app

#### General cases

If you wish to use Webpack for your app with the code provided in the step-by-step examples section, you'll need to:

```bash
npx create-react-app nymapp --template typescript
cd nymapp
```
You'll then need to install the needed dependencies, head to your app's `App.tsx` file and paste the code provided in the step-by-step section. 

#### Contract client

<Callout type="info" emoji="ℹ️">
    Using webpack, the `Contract client` for querying or executing might need polyfills. As create-react-app doesn´t allow you access to the Webpack config without ejecting, you'll overwrite it as follow:
</Callout>

##### Install contract-clients dependencies
```bash
npm install @nymproject/contract-clients @cosmjs/cosmwasm-stargate @cosmjs/proto-signing 
```

Head to you app's `App.tsx` file and replace the code by the one provided in the step-by-step examples section.

##### Polyfilling

Copy the following to your terminal and run:

```bash
npm install react-app-rewired
npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
cat <<EOF > config-overrides.js
const webpack = require('webpack');
const path = require('path')

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.module.rules = (config.module.rules || []).concat([
      {
        test: /\.(m?js)$/,
        resolve: {
          fullySpecified: false
        }
      }
    ])
  return config; 
}
EOF
```

#### Edit the `package.json` file as follows:

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