React files are not parsed when using Yarn workspaces

[henrikbjorn]

Describe the bug

We use Yarn workspaces internally in our React applications to make imports shorter and to make a clearer seperation between business logic and packages that could be separate.

Setting this up with Vite and using optimizeDeps.links seems to work for the most part.

However when we change the import in main.tsx for the <App /> component to import App from '@app/test/App' then vite won't recognize it is an React component.

[vite] failed to parse /@modules/@app/test/App.tsx for import rewrite.
web_1  | If you are using JSX, make sure to named the file with the .jsx extension.

However it will find the file just fine.

Reproduction

https://github.com/henrikbjorn/vite-workspaces-issue

System Info

• required vite version: 0.20.8
• required Operating System: Docker Alpine
• required Node version: 14.x.x

[henrikbjorn]

When building it can't find the module @app/test/App but using @app/test/App.tsx (and ignoring the ts error with @ts-ignore) then it works.

[dsseng]

Do .ts and .jsx files work correctly?

[henrikbjorn]

Do .ts and .jsx files work correctly?

Nope.