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

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