diff --git a/sdk/typescript/docs/pages/bundling.mdx b/sdk/typescript/docs/pages/bundling.mdx index 7d69a1d9df..b7f3f2fa44 100644 --- a/sdk/typescript/docs/pages/bundling.mdx +++ b/sdk/typescript/docs/pages/bundling.mdx @@ -53,3 +53,82 @@ If you are using a `*-full-fat` package, or if you inline WASM or web workers, y You'll have to experiment with either adjusting the CSP or use another variant that is unbundled. +## Webpack > 5 ESM + +You´ll need the following rule in your `webpack.config.js` above version 5: +```json +{ + test: /\.(m?js)$/, + resolve: { + fullySpecified: false + } +} +``` + +### Nextjs + +NextJS doesn´t allow you access to the webpack config without ejecting, which you override as follows: + +```bash +npx create-react-app nymapp --template typescript +cd nymapp +``` + +#### Install contract-clients dependencies + +```bash +npm install @nymproject/contract-clients @cosmjs/cosmwasm-stargate @cosmjs/proto-signing --save +``` + +#### 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 < 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" + }, +``` \ No newline at end of file diff --git a/sdk/typescript/docs/pages/guides/nym-smart-contracts.mdx b/sdk/typescript/docs/pages/guides/nym-smart-contracts.mdx index fee5123987..152711a98f 100644 --- a/sdk/typescript/docs/pages/guides/nym-smart-contracts.mdx +++ b/sdk/typescript/docs/pages/guides/nym-smart-contracts.mdx @@ -20,8 +20,8 @@ Lists of the diffent available clients and methods from the `Contract Clients` c Depending on your app or project's architecture, this could be any of the ESM or CJS versions of the `Contract Clients`. - This and the following examples will use the ESbuild bundler as they should work off the bat without any polyfill need. - If you'd like to use another one, we will document different bundlers in the [bundling](https://sdk.nymtech.net/bundling) page. + This and the following examples will use the ESbuild bundler. + If you'd like to use another one, we will document different bundlers and polyfills in the [bundling](https://sdk.nymtech.net/bundling) page. ##### Set-up your environment