vite and defer seem to lead to Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. and TypeError: window.__remixClearCriticalCss is not a function

[ZipBrandon]

What version of Remix are you using?

2.2.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

1. Clone https://github.com/ZipBrandon/remix-vite-cant-detect-preamble
2. npm i && npm run dev
3. open the page and open devtools console.
4. notice on refresh that Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. and TypeError: window.__remixClearCriticalCss is not a function appear in console.
5. In the loader.ts, uncomment the json() path and notice that document reloads no longer throw errors.

Expected Behavior

No issues in the console

Actual Behavior

Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. and TypeError: window.__remixClearCriticalCss is not a function in the console.

[marbemac]

Check out #7842

[aimz-yeah]

The above fixes the issue on create-remix@latest but i'm still getting the error when tested on a much larger codebase. This error appears to break all client-side JS

[marbemac]

@Fireclunge - the preamble log, or the remixClearCriticalCss is not a function log? or both? When loading all routes, or specific routes?

[aimz-yeah]

@Fireclunge - the preamble log, or the remixClearCriticalCss is not a function log? or both? When loading all routes, or specific routes?

The preamble log. Some of my routes go through multiple loaders each often each calling APIs from an external backend at each layer so i'm not sure if its the complexity that's causing the error or something else entirely.

The build code seems to fail here;

if (!window.__vite_plugin_react_preamble_installed__) {
    throw new Error( "..." ) 
} 

[ZipBrandon]

@Fireclunge I'm on a fairly large codebase (656 routes + large component libraries) and it seems to be working on my side.
Here's my patch package @remix-run+dev+2.2.0.patch

index 3f025ab..b07df68 100644
--- a/node_modules/@remix-run/dev/dist/vite/plugin.js
+++ b/node_modules/@remix-run/dev/dist/vite/plugin.js
@@ -515,7 +515,7 @@ const remixVitePlugin = (options = {}) => {
     load(id) {
       if (id === vmod.resolve(remixReactProxyId)) {
         // TODO: ensure react refresh is initialized before `<Scripts />`
-        return ['import { createElement } from "react";', 'export * from "@remix-run/react";', 'export const LiveReload = process.env.NODE_ENV !== "development" ? () => null : ', '() => createElement("script", {', ' type: "module",', " suppressHydrationWarning: true,", " dangerouslySetInnerHTML: { __html: `", `   import RefreshRuntime from "${vmod.url(hmrRuntimeId)}"`, "   RefreshRuntime.injectIntoGlobalHook(window)", "   window.$RefreshReg$ = () => {}", "   window.$RefreshSig$ = () => (type) => type", "   window.__vite_plugin_react_preamble_installed__ = true", " `}", "});"].join("\n");
+        return ['import { createElement } from "react";', 'export * from "@remix-run/react";', 'export const LiveReload = process.env.NODE_ENV !== "development" ? () => null : ', '() => createElement("script", {', ' type: "module",', " async: true,", " suppressHydrationWarning: true,", " dangerouslySetInnerHTML: { __html: `", `   import RefreshRuntime from "${vmod.url(hmrRuntimeId)}"`, "   RefreshRuntime.injectIntoGlobalHook(window)", "   window.$RefreshReg$ = () => {}", "   window.$RefreshSig$ = () => (type) => type", "   window.__vite_plugin_react_preamble_installed__ = true", " `}", "});"].join("\n");
       }
     }
   }, {

[marbemac]

@Fireclunge have you swapped LiveReload and Scripts in your root.tsx? (rendering livereload before scripts)

[aimz-yeah]

I reinstalled using the above patch file to make sure it wasn't a skill issue and regardless of the ordering of LiveReload and Scripts the same error occurs 😢

[aimz-yeah]

I found out what was causing the error. One of my libraries was throwing a process is not defined error so I manually defined it in vite.config.ts.

export default defineConfig({
  define: {
    "process.env": {},
  },
  plugins: [remix(), tsconfigPaths()],
});

This was messing with the turnary logic in the patch when testing for process.env.NODE_ENV !== "development" - so I removed the turnary.

Here's my patch file that 'fixes'

diff --git a/node_modules/@remix-run/dev/dist/vite/plugin.js b/node_modules/@remix-run/dev/dist/vite/plugin.js
index 3f025ab..518e8e3 100644
--- a/node_modules/@remix-run/dev/dist/vite/plugin.js
+++ b/node_modules/@remix-run/dev/dist/vite/plugin.js
@@ -515,7 +515,7 @@ const remixVitePlugin = (options = {}) => {
     load(id) {
       if (id === vmod.resolve(remixReactProxyId)) {
         // TODO: ensure react refresh is initialized before `<Scripts />`
-        return ['import { createElement } from "react";', 'export * from "@remix-run/react";', 'export const LiveReload = process.env.NODE_ENV !== "development" ? () => null : ', '() => createElement("script", {', ' type: "module",', " suppressHydrationWarning: true,", " dangerouslySetInnerHTML: { __html: `", `   import RefreshRuntime from "${vmod.url(hmrRuntimeId)}"`, "   RefreshRuntime.injectIntoGlobalHook(window)", "   window.$RefreshReg$ = () => {}", "   window.$RefreshSig$ = () => (type) => type", "   window.__vite_plugin_react_preamble_installed__ = true", " `}", "});"].join("\n");
+        return ['import { createElement } from "react";', 'export * from "@remix-run/react";', 'export const LiveReload = () => createElement("script", {', ' type: "module",', " async: true,", " suppressHydrationWarning: true,", " dangerouslySetInnerHTML: { __html: `", `   import RefreshRuntime from "${vmod.url(hmrRuntimeId)}"`, "   RefreshRuntime.injectIntoGlobalHook(window)", "   window.$RefreshReg$ = () => {}", "   window.$RefreshSig$ = () => (type) => type", "   window.__vite_plugin_react_preamble_installed__ = true", " `}", "});"].join("\n");
       }
     }
   }, {

Obviously not a proper fix, but hopefully gives some insight into how this happened

[ZipBrandon]

@Fireclunge I had an issue where I had a utils.ts that had various functions in it. One of the functions was for actions/loaders and pulled in inspect. The solution for me was to take these server based functions and put them in a new utils.server.ts file which got them out of client/browser code. Could this be a possible solution for what you are facing?

[aimz-yeah]

@Fireclunge I had an issue where I had a utils.ts that had various functions in it. One of the functions was for actions/loaders and pulled in inspect. The solution for me was to take these server based functions and put them in a new utils.server.ts file which got them out of client/browser code. Could this be a possible solution for what you are facing?

Perfect, working on migrating loader functions to .server.ts seems to be fixing it. Thank you both for your help on this

[hi-ogawa]

It seems I can still reproduce this intermittently by reloading a page for 10 to 20 times even without defer.
I made a reproduction on Github CI here hi-ogawa/test-remix-vite-hmr-runtime#1

[markdalgleish]

This is fixed by #7919.

[piotrkulpinski]

I can still see the error after updating Remix to experimental.

[hi-ogawa]

I think experimental release is different. nightly is the one releasing https://github.com/remix-run/remix/tree/dev, which should include the fix.

[github-actions]

🤖 Hello there,

We just published version 2.3.0-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.3.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[anyuruf]

I had a similar issue with my Remix 2.10.3 / 2.10.2 and 2.8.1 and turns out :
The Remix Vite plugin is only intended for use in your application's development server and production builds. While there are other Vite-based tools such as Vitest and Storybook that make use of the Vite config file, the Remix Vite plugin has not been designed for use with these tools. We currently recommend excluding the plugin when used with other Vite-based tools. As "Plugin usage with other Vite-based tools" (e.g. Vitest, Storybook) section @ https://remix.run/docs/en/main/guides/vite#troubleshooting

I had to change the remix() plugin section of the vite.config file to include !process.env.VITEST ? remix () : react check my public repo for setup https://github.com/anyuruf/kinstree-remix