import { Callout } from 'nextra/components';

# Troubleshooting bundling with Webpack


<Callout type="error">
    The TypeScript SDK is currently not avaliable to use: a network upgrade elsewhere has caused a problem which is not currently fixed. TS SDK Clients are not able to connect to the network.

    When the issue is resolved, this will be reflected in the documentation.

    Thanks for your patience!
</Callout>

## 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"
  },
```
