Troubleshooting bundling with Webpack

🚫

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!

Webpack > 5 ESM

For any project using Webpack, you´ll need the following rule in your webpack.config.js above version 5:

{
        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:

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

ℹ️

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:

Install contract-clients dependencies

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:

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:

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

ESbuild FAQ