workaround with require shim

Author: jonathanwelch1-nhs

packages/cpt-ui/package.json

@@ -24,6 +24,7 @@
     "pino": "^10.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-input-mask": "^2.0.4",
     "react-router-dom": "6.30.1",
     "sass": "^1.96.0"
   },
@@ -36,6 +37,7 @@
     "@types/govuk-frontend": "^5.11.0",
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.1",
+    "@types/react-input-mask": "^3.0.6",
     "@vitejs/plugin-react-swc": "^4.2.2",
     "axios-mock-adapter": "^2.1.0",
     "sass": "^1.96.0",

packages/cpt-ui/src/main.tsx

@@ -1,3 +1,4 @@
+import "./shims/require-shim"
 import React from "react"
 import ReactDOM from "react-dom/client"
 import {BrowserRouter} from "react-router-dom"

packages/cpt-ui/src/shims/require-shim.ts

@@ -0,0 +1,21 @@
+// Shim for packages that incorrectly use CommonJS require() in ES modules
+// This is specifically for nhsuk-react-components-extensions which incorrectly
+// uses require('react-input-mask') in its ES module build
+
+import ReactInputMask from "react-input-mask"
+
+// Add require to the global scope for the browser environment only
+if (typeof window !== "undefined") {
+  // Create a require function specifically for react-input-mask
+  function browserRequire(id: string): unknown {
+    if (id === "react-input-mask") {
+      return ReactInputMask
+    }
+    throw new Error(`require() is not supported in browser ES modules. Module requested: ${id}`)
+  }
+
+  // Assign to globalThis if require doesn't already exist
+  if (!(globalThis as Record<string, unknown>).require) {
+    ;(globalThis as Record<string, unknown>).require = browserRequire
+  }
+}

packages/cpt-ui/vite.config.ts

@@ -40,6 +40,13 @@ export default defineConfig(({mode}) => {
         }
       }
     },
-    define: envWithProcessPrefix
+    define: {
+      ...envWithProcessPrefix,
+      "global": "globalThis"
+    },
+    optimizeDeps: {
+      include: ["react-input-mask"],
+      exclude: []
+    }
   }
 })