fix(chrome-129): show issue page (stackblitz#157)

samdenty · web-flow · commit d0828e4c86ff · 2024-10-07T14:20:42.000Z
diff --git a/package.json b/package.json
@@ -71,9 +71,9 @@
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.0",
+    "remix-island": "^0.2.0",
     "remix-utils": "^7.6.0",
     "shiki": "^1.9.1",
-    "remix-island": "^0.2.0",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,6 +1,6 @@
 import { cloudflareDevProxyVitePlugin as remixCloudflareDevProxy, vitePlugin as remixVitePlugin } from '@remix-run/dev';
 import UnoCSS from 'unocss/vite';
-import { defineConfig } from 'vite';
+import { defineConfig, type ViteDevServer } from 'vite';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import { optimizeCssModules } from 'vite-plugin-optimize-css-modules';
 import tsconfigPaths from 'vite-tsconfig-paths';
@@ -24,7 +24,34 @@ export default defineConfig((config) => {
       }),
       UnoCSS(),
       tsconfigPaths(),
+      chrome129IssuePlugin(),
       config.mode === 'production' && optimizeCssModules({ apply: 'build' }),
     ],
   };
 });
+
+function chrome129IssuePlugin() {
+  return {
+    name: 'chrome129IssuePlugin',
+    configureServer(server: ViteDevServer) {
+      server.middlewares.use((req, res, next) => {
+        const raw = req.headers['user-agent']?.match(/Chrom(e|ium)\/([0-9]+)\./);
+
+        if (raw) {
+          const version = parseInt(raw[2], 10);
+
+          if (version === 129) {
+            res.setHeader('content-type', 'text/html');
+            res.end(
+              '<body><h1>Please use Chrome Canary for testing.</h1><p>Chrome 129 has an issue with JavaScript modules & Vite local development, see <a href="https://github.com/stackblitz/bolt.new/issues/86#issuecomment-2395519258">for more information.</a></p><p><b>Note:</b> This only impacts <u>local development</u>. `pnpm run build` and `pnpm run start` will work fine in this browser.</p></body>',
+            );
+
+            return;
+          }
+        }
+
+        next();
+      });
+    },
+  };
+}
