remix: 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`

What version of Remix are you using?

2.2.0

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

Steps to Reproduce

Clone https://github.com/ZipBrandon/remix-vite-cant-detect-preamble
npm i && npm run dev
open the page and open devtools console.
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.
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.

About this issue

Original URL
State: closed
Created 8 months ago
Reactions: 3
Comments: 16 (8 by maintainers)

Most upvoted comments

Check out https://github.com/remix-run/remix/pull/7842

marbemac on Nov 1, 2023

@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

Fireclunge on Nov 1, 2023