React Router v7 dev server doesn't work with Supabase

[jperasmus]

Here is a minimal reproduction repo of the issue: https://github.com/jperasmus/repro-react-router-7-cloudflare-supabase

Steps I took to create the repro:

• Installed the Cloudflare template within this repo
• Installed @supabase/supabase-js
• Enabled the nodejs_compat flag in wrangler config to allow Node.js streams
• Simply import "@supabase/supabase-js" in the example home.tsx route module
• Run the app: npm run dev which starts up fine
• Open the app in the browser, and it will crash with the following error:

node:internal/fs/promises:638
  return new FileHandle(await PromisePrototypeThen(
                        ^

Error: ENOENT: no such file or directory, open 'node:stream'
    at open (node:internal/fs/promises:638:25)
    at Object.readFile (node:internal/fs/promises:1242:14)
    at extractExportsData (file:///xxx/node_modules/vite/dist/node/chunks/dep-Pj_jxEzN.js:18700:24) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',

If you comment out the import "@supabase/supabase-js, the problem goes away.

For my own sanity, here is another repro that uses the same @cloudflare/vite-plugin and the Supabase import added to it. Ie. the only difference is it doesn't run via react-router dev. This runs without any errors (after enabling nodejs_compat of course). This leads me to believe the React Router CLI is doing something to cause the issue since it bootstraps the Vite app.

Further, if I first npm run build and then npm run preview on the repo using React Router, the app works. I believe this is fine since the preview is using vite preview directly.

[jamesopstad]

This might be the same issue reported in cloudflare/workers-sdk#8678, which is fixed in remix-run/react-router#13317 and will be in the next React Router release.

Can you check if your terminal logs include AssertionError [ERR_ASSERTION]: depsOptimizer is required in dev mode when it errors?

[jperasmus]

Mine does not include that same error output, unfortunately, but could be related to the dependency optimizer overriding you linked.

The error I posted above is the full output I get.

[jamesopstad]

Would you be able to try using the 7.5.0-pre.0 release of react-router and @react-router/dev and see if you get the same error?

[jperasmus]

I tried it now but still got the same error, unfortunately.

[jperasmus]

Do you have any other ideas that I can look into to try and get to the bottom of this? I am surprised that not more people are reporting the same problem because I imagine Cloudflare + React Router + Supabase is a relatively popular stack.

It could be that they are reporting it on other repos since it is hard to pinpoint exactly which part is causing the problem. And it could very likely be the combination of tools.

The thing that does seem strange to me is that the React Router dev command runs in a CJS context even though my app and Vite mostly expect ESM.

[jperasmus]

Some extra info that might help. I figured out that I can import Supabase fine inside the workers entry file. This way, I can make Supabase available throughout the app in the context, but this is obviously not a sufficient solution, since it means I can't use any of the client-side hooks, etc anywhere in the app.

It really does seem like the React Router vite plugin(s) are doing something strange with the dependencies so that Vite doesn't know how to import the correct dependency file in the correct environment.

[calumpeak]

Just linking this here: cloudflare/workers-sdk#8678 (comment) - same issue - using node modules in loaders/actions causes a downstream error in vite.

[jamesopstad]

We are making this a priority on the Cloudflare side and will try to get a fix out asap.

[jamesopstad]

We've release v1.0.4 of @cloudflare/vite-plugin, which fixes this issue. Thanks for your patience.

[jperasmus]

Thanks for the fast turnaround @jamesopstad

[brookslybrand]

All the dependencies in the cloudflare templates should be fully up to date (#119). Thanks @jamesopstad for all the work on the plugin and @jperasmus for brining up this issue

Let us know if there are still remaining issues