[Vite] Error: You must render this element inside a <Remix> element when running dev server for the first time with default client entry

[hi-ogawa]

What version of Remix are you using?

0.0.0-nightly-3874120-20231103

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

• Yes

Steps to Reproduce

(EDIT: It seems this is not limited to pnpm. It's reproducible with npm as well. See 2nd comment for details)

(tldr; adding @remix-run/react to optimizeDeps.include might fix this issue.)

I was trying to reproduce #7863 on CI, but it turns out this error always happens on clean installation.

• Reproduction repo https://github.com/hi-ogawa/test-remix-vite-hmr-runtime
• CI failure https://github.com/hi-ogawa/test-remix-vite-hmr-runtime/actions/runs/6761390975/job/18376217210#step:7:22

Locally, I was seeing the same error several times, but after restarting the dev server, the error always went away (note that browser reload alone doesn't fix this).
Investigating further, I found that this is reproducible after rm -rf node_modules && pnpm i && pnpm dev.
And I also found that same could be reproducible by effectively disabling dependency pre-bundling by vite dev --force (cf. https://vitejs.dev/guide/dep-pre-bundling.html).

Here is a screenshot of the error with js code of default client.entry.tsx on the right top:

Reveal screenshot

As partially seen from the screenshot, it seems that when default client entry inside node_modules/@remix-run/dev on pnpm is used, import { RemixBrowser } from "@remix-run/react" is transformed to the following:

// request url
// http://localhost:5173/node_modules/.pnpm/@[email protected]_@[email protected]_aia6g25sy3qpuqzpr7zrhnhhya/node_modules/@remix-run/dev/dist/config/defaults/entry.client.tsx
...
import {RemixBrowser} from "/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@remix-run/react/dist/esm/index.js?v=1ecd547c";

However, comparing with user routes which also use @rexmi-run/react module, it looks like this:

// http://localhost:5173/app/root.tsx
...
import {Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration} from "/@id/__x00__virtual:remix-react-proxy";
...

// http://localhost:5173/@id/__x00__virtual:remix-react-proxy
export * from "/node_modules/.vite/deps/@remix-run_react.js?v=864763a5";
...

So, probably having a different import source is leading to some sort of "dual package hazard".

Note that, after the server restart (without --force), the error goes away and the same import looks like this:

// http://localhost:5173/node_modules/.pnpm/@[email protected]_@[email protected]_aia6g25sy3qpuqzpr7zrhnhhya/node_modules/@remix-run/dev/dist/config/defaults/entry.client.tsx
import {RemixBrowser} from "/node_modules/.vite/deps/@remix-run_react.js?v=6e4b22d3";

// http://localhost:5173/@id/__x00__virtual:remix-react-proxy
export * from "/node_modules/.vite/deps/@remix-run_react.js?v=6e4b22d3";
...

After seeing this, it came naturally to try adding @remix-run/react to optimizedDeps.include, and indeed this seems to fix the issue, i.e. no error even with vite dev --force.

import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  clearScreen: false,
  plugins: [remix(), tsconfigPaths()],
  optimizeDeps: {
    include: ["@remix-run/react"],              ///  <-- add @remix-run/react to optimized deps
  },
});

You can see this error is fixed error on reproduction repo hi-ogawa/test-remix-vite-hmr-runtime#1 but now CI shows error from @vitejs/plugin-react can't detect preamble #7863.

• https://github.com/hi-ogawa/test-remix-vite-hmr-runtime/actions/runs/6761736191/job/18376925487?pr=1#step:7:35

Right now, I don't fully understand the consequence of doing optimizeDeps, so I'm creating this issue first before trying to create a PR. I would appreciate if anyone has insight on this.

Expected Behavior

No error for first vite dev

Actual Behavior

Errro as described in "Steps to Reproduce"

[hi-ogawa]

It seems the same error is reproducible with npm as well.
See reproduction in hi-ogawa/test-remix-vite-hmr-runtime#3

By doing similar debugging as above, I see these imports when running vite dev --force:

// in http://localhost:5173/node_modules/@remix-run/dev/dist/config/defaults/entry.client.tsx
import {RemixBrowser} from "/node_modules/@remix-run/react/dist/esm/index.js?v=17a387ed";
...

// in http://localhost:5173/@id/__x00__virtual:remix-react-proxy
export * from "/node_modules/.vite/deps/@remix-run_react.js?v=d10a7b92";
...

[markdalgleish]

This is fixed by #7926 which will be available in the next release. If you'd like, you can confirm against the latest nightly release.

[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!