🐛 BUG: Module './Icon.astro' was resolved to '<path_to_component>/Icon.astro', but '--jsx' is not set.

[slimluccii]

Describe the Bug

I'm exporting the Icon.astro component in an index.ts file like export { default } from './Icon.astro';. This causes a red line under the file path ./Icon.astro. When I hover over there line I get the following error Module './Icon.astro' was resolved to '<path_to_component>/Icon.astro', but '--jsx' is not set. ts(6142).

Steps to Reproduce

1. npm create astro@latest using template Empty with Typescript
2. Create the Icon.astro component.
3. Create an index.ts.
4. Export the Icon.astro from the index.ts like export { default } from './Icon.astro';
5. Error! When you have the Astro extension running you should see the red line under the path ./Icon.astro.

[Princesseuh]

This is not really a bug, Astro components are internally TSX and thus require the jsx config to be set, because TypeScript does not support JSX otherwise. Last time I checked we couldn't really force enable it for users, but maybe this changed.

[slimluccii]

Interesting. I don't have this issue with Svelte and their extension. Maybe you can look at what they do to prevent this error.

Thanks for your reply. I'll use the workaround for now!