fix: Tell webpack about dynamic import + fixed polyfills (#1151)

fix: tell webpack about dynamic import + fixed polyfills

Author: ecp4224

packages/sdk-install-modal-web/stencil.config.ts

@@ -11,7 +11,7 @@ export const config: Config = {
     },
   ],
   enableCache: true,
-  buildEs5: true,
+  buildEs5: false,
   // Add hash for file names for better caching
   hashFileNames: true,
   excludeUnusedDependencies: true,

packages/sdk-react/package.json

@@ -98,6 +98,7 @@
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-jscc": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-polyfill-node": "^0.13.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.36.0",

packages/sdk-react/rollup.config.js

@@ -4,6 +4,7 @@ import { nodeResolve } from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
 import external from 'rollup-plugin-peer-deps-external';
 import { terser } from 'rollup-plugin-terser';
+import globals from 'rollup-plugin-polyfill-node';
 
 const packageJson = require('./package.json');
 
@@ -35,8 +36,16 @@ const config = [
         browser: true,
       }),
       commonjs(),
+      globals({
+        include: null,
+      }),
       json(),
-      terser(),
+      terser({
+        format: {
+          // keep all /* webpack*: * */ comments and /* vite-*: * */ comments
+          comments: (_, comment) => comment.value.includes("webpack") || comment.value.includes("vite")
+        }
+      }),
     ],
   },
   {
@@ -60,8 +69,16 @@ const config = [
         preferBuiltins: true,
       }),
       commonjs(),
+      globals({
+        include: null,
+      }),
       json(),
-      terser(),
+      terser({
+        format: {
+          // keep all /* webpack*: * */ comments and /* vite-*: * */ comments
+          comments: (_, comment) => comment.value.includes("webpack") || comment.value.includes("vite")
+        }
+      }),
     ],
   }
 ];

packages/sdk/package.json

@@ -131,7 +131,6 @@
     "rollup-plugin-jscc": "^2.0.0",
     "rollup-plugin-natives": "^0.7.5",
     "rollup-plugin-node-builtins": "^2.1.2",
-    "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "rollup-plugin-sizes": "^1.0.6",
     "rollup-plugin-typescript2": "^0.31.2",

packages/sdk/rollup.config.js

@@ -8,7 +8,7 @@ import terser from '@rollup/plugin-terser';
 import builtins from 'rollup-plugin-node-builtins';
 import { visualizer } from 'rollup-plugin-visualizer';
 import replace from '@rollup/plugin-replace';
-import globals from 'rollup-plugin-node-globals';
+import globals from 'rollup-plugin-polyfill-node';
 
 const packageJson = require('./package.json');
 const isDev = process.env.NODE_ENV === 'dev';
@@ -33,6 +33,24 @@ const sharedDeps = ['eventemitter2', 'socket.io-client', 'debug', 'uuid', 'cross
 // Filter function to exclude bundled dependencies
 const excludeBundledDeps = (dep) => !bundledDeps.includes(dep);
 
+// Used to inject "/* webpackIgnore: true */" for sdk-install-modal-web dynamic import
+const injectWebpackIgnore = () => {
+  return {
+    name: 'inject-webpack-ignore',
+    generateBundle(_, bundle) {
+      for (const file of Object.keys(bundle)) {
+        if (file === 'metamask-sdk.js' && bundle[file].code) {
+          // Inject the webpackIgnore comment into dynamic import
+          bundle[file].code = bundle[file].code.replace(
+            /import\(/g,
+            'import(/* webpackIgnore: true */'
+          );
+        }
+      }
+    },
+  };
+};
+
 // Dependencies that should always be external
 const baseExternalDeps = [
   ...peerDependencies.filter(excludeBundledDeps),
@@ -165,16 +183,25 @@ const configs = [
         transformMixedEsModules: true,
         include: /node_modules/,
       }),
-      globals(),
+      globals({
+        include: null,
+      }),
       builtins({
         crypto: true,
         stream: true,
         http: true,
         https: true,
         url: true,
+        process: true,
         buffer: false,
       }),
-      terser(),
+      terser({
+        format: {
+          // keep all /* webpack*: * */ comments and /* vite-*: * */ comments
+          comments: (_, comment) => comment.value.includes("webpack") || comment.value.includes("vite")
+        }
+      }),
+      injectWebpackIgnore(),
     ],
     onwarn: sharedWarningHandler,
   },
@@ -234,9 +261,17 @@ const configs = [
         dedupe: sharedDeps,
       }),
       commonjs({ transformMixedEsModules: true, include: /node_modules/ }),
-      globals(),
+      globals({
+        include: null,
+      }),
       builtins({ crypto: true }),
-      terser(),
+      terser({
+        format: {
+          // keep all /* webpack*: * */ comments and /* vite-*: * */ comments
+          comments: (_, comment) => comment.value.includes("webpack") || comment.value.includes("vite")
+        }
+      }),
+      injectWebpackIgnore(),
     ],
     onwarn: sharedWarningHandler,
   },
@@ -263,7 +298,12 @@ const configs = [
         browser: true,
         preferBuiltins: true,
       }),
-      terser(),
+      terser({
+        format: {
+          // keep all /* webpack*: * */ comments and /* vite-*: * */ comments
+          comments: (_, comment) => comment.value.includes("webpack") || comment.value.includes("vite")
+        }
+      }),
     ],
     onwarn: sharedWarningHandler,
   },
@@ -306,7 +346,12 @@ const configs = [
         exportConditions: ['node'],
       }),
       commonjs({ transformMixedEsModules: true }),
-      terser(),
+      terser({
+        format: {
+          // keep all /* webpack*: * */ comments and /* vite-*: * */ comments
+          comments: (_, comment) => comment.value.includes("webpack") || comment.value.includes("vite")
+        }
+      }),
     ],
     onwarn: sharedWarningHandler,
   },

yarn.lock

@@ -11269,6 +11269,7 @@ __metadata:
     rollup-plugin-node-builtins: ^2.1.2
     rollup-plugin-node-globals: ^1.4.0
     rollup-plugin-peer-deps-external: ^2.2.4
+    rollup-plugin-polyfill-node: ^0.13.0
     rollup-plugin-postcss: ^4.0.2
     rollup-plugin-terser: ^7.0.2
     rollup-plugin-typescript2: ^0.36.0
@@ -11606,7 +11607,6 @@ __metadata:
     rollup-plugin-jscc: ^2.0.0
     rollup-plugin-natives: ^0.7.5
     rollup-plugin-node-builtins: ^2.1.2
-    rollup-plugin-node-globals: ^1.4.0
     rollup-plugin-polyfill-node: ^0.13.0
     rollup-plugin-sizes: ^1.0.6
     rollup-plugin-typescript2: ^0.31.2