Suffixing JSX files with .react.tsx, .preact.tsx, .solid.tsx breaks hydration

[bryanmylee]

What version of astro are you using?

1.2.6

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

Issue

When naming .tsx components with a suffix i.e. .react.tsx, solid.tsx, or preact.tsx, Astro loads the component just fine for SSR.

However, adding client hydration with any of the client: directives breaks Astro with the following errors:

Client

GET http://localhost:3000/@fs/Users/bryan/Projects/web/repros/astro-dot-notation-components/src/components/Button.react 404 (Not Found)
Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:3000/@fs/Users/bryan/Projects/web/repros/astro-dot-notation-components/src/components/Button.react

Server

09:51:18 PM [serve]    404 /Users%2Fbryan%2FProjects%2Fweb%2Frepros%2Fastro-dot-notation-components%2Fsrc%2Fcomponents%2FButton.react

Link to Minimal Reproducible Example

https://github.com/bryanmylee/astro-dot-notation-components

Participation

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

[JohnDaly]

Do you still get these errors if you use the full file extension in your imports?

Instead of:
import Button from "../components/Button.react";

Try:
import Button from "../components/Button.react.tsx";

[bryanmylee]

The errors are resolved if I use the full file extension. However, this causes VSCode to raise this TypeScript error:

An import path cannot end with a '.tsx' extension. Consider importing './Button.react.js' instead.ts(2691)

Using .jsx or .js resolves the TypeScript error, but breaks Astro's import again.

[matthewp]

@bluwy is working on the .jsx / .tsx stripping that is causing this issue. This should be fixed when that is complete.

[bluwy]

I tested the repro locally and it's fixed by #4918 which is going out on the next release. I've submitted #4982 to add a test for this.

[bryanmylee]

Thanks for the great work @bluwy :)