Fix Vite 8 library React imports

.github/workflows/react-compatibility.yml

@@ -35,5 +35,8 @@ jobs:
       - name: Build library
         run: npm run build-lib
 
+      - name: Verify library bundle
+        run: npm run verify-lib
+
       - name: Build docs
         run: npm run build-docs

package.json

@@ -39,6 +39,7 @@
     "dev": "vite",
     "build": "npm run build-lib && npm run build-docs",
     "build-lib": "vite build -m lib",
+    "verify-lib": "node scripts/verify-library-bundle.js",
     "build-docs": "vite build",
     "lhci:prep": "node scripts/extract-routes.js",
     "lhci:run": "rmdir /s /q .lighthouseci 2>nul & npx @lhci/cli autorun --config=.lighthouserc.gen.json --verbose & node scripts/lhci-index.js",
@@ -67,6 +68,7 @@
     "react-dom": "^18.2.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@babel/parser": "^7.29.8",
     "@lhci/cli": "^0.15.1",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",

scripts/verify-library-bundle.js

@@ -0,0 +1,33 @@
+import fs from "node:fs";
+
+const bundlePath = new URL("../dist/groundwork.es.js", import.meta.url);
+
+if (!fs.existsSync(bundlePath)) {
+  throw new Error("Library bundle not found. Run `npm run build-lib` first.");
+}
+
+const bundle = fs.readFileSync(bundlePath, "utf8");
+const forbiddenPatterns = [
+  {
+    description: "a browser-side CommonJS require fallback",
+    pattern: "Calling `require` for",
+  },
+  {
+    description: "a CommonJS React require call",
+    pattern: /\brequire\((['"`])react(?:\/jsx-runtime)?\1\)/,
+  },
+];
+
+for (const { description, pattern } of forbiddenPatterns) {
+  if (
+    typeof pattern === "string"
+      ? bundle.includes(pattern)
+      : pattern.test(bundle)
+  ) {
+    throw new Error(`ES module bundle contains ${description}.`);
+  }
+}
+
+console.log(
+  "Verified the ES module bundle uses browser-compatible React imports.",
+);

vite.config.js

@@ -1,4 +1,4 @@
-import { defineConfig } from "vite";
+import { defineConfig, esmExternalRequirePlugin } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "tailwindcss";
 import pkg from "./package.json";
@@ -36,16 +36,21 @@ export default defineConfig(({ mode }) => {
   if (mode === "lib") {
     console.log("Building library");
     return {
-      plugins: [react(), tailwindcss()],
+      plugins: [
+        react(),
+        tailwindcss(),
+        esmExternalRequirePlugin({
+          external: ["react", "react-dom", "react/jsx-runtime"],
+        }),
+      ],
       publicDir: false,
       build: {
         lib: {
           name: "Groundwork",
           fileName: (format) => `groundwork.${format}.js`,
           entry: "lib/index.jsx",
         },
-        rollupOptions: {
-          external: ["react", "react-dom", "react/jsx-runtime"],
+        rolldownOptions: {
           output: {
             assetFileNames: (assetInfo) => {
               if (assetInfo.name?.endsWith(".css")) {