add polyfills details to bundling page

2023-10-01 17:19:58 +02:00
parent 98898054c3
commit 587f500a0c
2 changed files with 81 additions and 2 deletions
@@ -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 <<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"
+  },
+```
@@ -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`.
 <Callout type="info" emoji="ℹ️">
-    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.
 </Callout>
 ##### Set-up your environment