build: webpack bn.js only once instead of many times (#1750)

* stop webpacking bn multiple times

* add to test webpacking

* fix webpacking issues, make sure tests work

* remove debugging leftovers

* add link to github issue

* revert package-lock changes

* uncomment dev mode webpacking

* increase browser test timeout

package.json

@@ -33,12 +33,12 @@
     "elliptic": "^6.5.4"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.136",
-    "@types/ws": "^8.2.0",
     "@types/chai": "^4.2.21",
+    "@types/lodash": "^4.14.136",
     "@types/mocha": "^9.0.0",
     "@types/node": "^16.4.3",
     "@types/puppeteer": "5.4.4",
+    "@types/ws": "^8.2.0",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.0.0",
     "@xrplf/eslint-config": "^1.4.0",

test/browser/browserIntegration.ts

@@ -4,7 +4,7 @@ import path from 'path'
 import { expect, assert } from 'chai'
 import puppeteer from 'puppeteer'
 
-const TIMEOUT = 60000
+const TIMEOUT = 80000
 interface TestCaseInfo {
   name: string
   span: string

test/webpack.config.js

@@ -3,6 +3,15 @@ const path = require('path')
 const webpack = require('webpack')
 const assert = require('assert')
 
+const bnJsReplaces = [
+  'tiny-secp256k1',
+  'asn1.js',
+  'create-ecdh',
+  'miller-rabin',
+  'public-encrypt',
+  'elliptic',
+]
+
 function webpackForTest(testFileName) {
   const match = testFileName.match(/\/?([^\/]*)\.ts$/)
   if (!match) {
@@ -31,6 +40,18 @@ function webpackForTest(testFileName) {
         resourceRegExp: /^\.\/wordlists\/(?!english)/,
         contextRegExp: /bip39\/src$/,
       }),
+      // this is a bit of a hack to prevent 'bn.js' from being installed 6 times
+      // TODO: any package that is updated to use bn.js 5.x needs to be removed from `bnJsReplaces` above
+      // https://github.com/webpack/webpack/issues/5593#issuecomment-390356276
+      new webpack.NormalModuleReplacementPlugin(/^bn.js$/, (resource) => {
+        if (
+          bnJsReplaces.some((pkg) =>
+            resource.context.includes(`node_modules/${pkg}`),
+          )
+        ) {
+          resource.request = 'diffie-hellman/node_modules/bn.js'
+        }
+      }),
     ],
     module: {
       rules: [

webpack.config.js

@@ -3,6 +3,15 @@ const path = require('path')
 const webpack = require('webpack')
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 
+const bnJsReplaces = [
+  'tiny-secp256k1',
+  'asn1.js',
+  'create-ecdh',
+  'miller-rabin',
+  'public-encrypt',
+  'elliptic',
+]
+
 function getDefaultConfiguration() {
   return {
     cache: true,
@@ -16,20 +25,24 @@ function getDefaultConfiguration() {
     },
     plugins: [
       new webpack.NormalModuleReplacementPlugin(/^ws$/, './wsWrapper'),
-      new webpack.NormalModuleReplacementPlugin(
-        /^\.\/wallet\/index$/,
-        './wallet-web',
-      ),
-      new webpack.NormalModuleReplacementPlugin(
-        /^.*setup-api$/,
-        './setup-api-web',
-      ),
       new webpack.ProvidePlugin({ process: 'process/browser' }),
       new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] }),
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/wordlists\/(?!english)/,
         contextRegExp: /bip39\/src$/,
       }),
+      // this is a bit of a hack to prevent 'bn.js' from being installed 6 times
+      // TODO: any package that is updated to use bn.js 5.x needs to be removed from `bnJsReplaces` above
+      // https://github.com/webpack/webpack/issues/5593#issuecomment-390356276
+      new webpack.NormalModuleReplacementPlugin(/^bn.js$/, (resource) => {
+        if (
+          bnJsReplaces.some((pkg) =>
+            resource.context.includes(`node_modules/${pkg}`),
+          )
+        ) {
+          resource.request = 'diffie-hellman/node_modules/bn.js'
+        }
+      }),
     ],
     module: {
       rules: [],