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