Astro 3.0 breaks React client component

[jorgebenaventee]

Astro info

Astro version            v3.0.3
Package manager          pnpm
Platform                 win32
Architecture             x64
Adapter                  @astrojs/node
Integrations             @astrojs/tailwind, @astrojs/react

What browser are you using?

Chrome

Describe the Bug

After upgrading to Astro 3.0 while using node adapter and hybrid output, it is adding before-hydration-url=/ attribute to React client components. This makes childrenConnectedCallback try to import / and breaking the rendering causing the following error message in browser console when running astro preview (Works fine in dev mode)

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

What's the expected result?

I expected my component to render properly

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-bmpb88

Participation

• [ ] I am willing to submit a pull request for this issue.

[jorgebenaventee]

Link to Minimal Reproducible Example is not working because Node version is not supported. You can download the project to test locally.

[xesrevinu]

I created a reproducible repository and deployed it to cloudflare pages :) https://astro-react-prod-issue.pages.dev https://github.com/xesrevinu/astro-react-prod-issue

astro-react-prod-issue.pages.dev/:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
(index):3 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: https://astro-react-prod-issue.pages.dev/

[jorgebenaventee]

I created a reproducible repository and deployed it to cloudflare pages :) https://astro-react-prod-issue.pages.dev https://github.com/xesrevinu/astro-react-prod-issue

astro-react-prod-issue.pages.dev/:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
(index):3 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: https://astro-react-prod-issue.pages.dev/

Thank you very much!

[natemoo-re]

Thank you for the report! We'll look into this as soon as we can!

[JLarky]

I was able to reproduce this with Vercel serveless adapter as well. You can see that in the last commit I'm changing output from server to hybrid and it stops hydrating it on the client.

I created a reproduction here https://github.com/JLarky/astro-examples/tree/main/astro-3-react-ssr-vercel-bug

expected:

instead got this:

[pijusz]

I get somewhat similar error: I'm using React components with shadcn's navigation (Mobile and Desktop modals) with: client:load and Mobile Nav also has: client:media="(max-width: 1024px)" In preview I get 2 console errors (in dev mode it works): "SES_UNHANDLED_REJECTION: TypeError: error loading dynamically imported module: URL" And then "Loading module from “URL” was blocked because of a disallowed MIME type (“text/html”)."

[ajn404]

same error

[jln13x]

I was able to reproduce this with Vercel serveless adapter as well. You can see that in the last commit I'm changing output from server to hybrid and it stops hydrating it on the client.

I created a reproduction here JLarky/astro-examples@main/astro-3-react-ssr-vercel-bug

expected:

instead got this:

did it work for you with the output: server ? Because neither works for me.

[degun]

I get the same error with Svelte components.

"@astrojs/node": "^6.0.0", (also "@astrojs/netlify": "^3.0.1",) "@astrojs/svelte": "^4.0.0", "astro": "^3.0.7",

[vampaz]

Same with Vue

[pijusz]

Seems to have been fixed with https://github.com/withastro/astro/pull/8388

[benjamin-guibert]

I get the same issue using hybrid mode with Vercel:

• Client components work fine on server rendered pages (prerender = false);
• Client components don't work on static pages;
• Everything works fine locally when running in dev mode.

[benjamin-guibert]

Never mind, I was still using Astro version 3.0. I can confirm that the issue is solved for version 3.1.2. Thank you for the fix, you rock! 🚀