4 ms·
I have a small React project using vite 7 and have the following in my config so that vite interprets ".js" files as JSX: // See https://github.com/vitejs/
by vite_throwaway 7mo ago
I have a small React project using vite 7 and have the following in my config so that vite interprets ".js" files as JSX:
// See https://github.com/vitejs/vite/discussions/14652
esbuild: {
loader: "jsx",
include: /.*\.jsx?$/,
exclude: [],
},
optimizeDeps: {
esbuildOptions: {
loader: {
".js": "jsx",
},
},
},
Note the comment at the top. I had no idea how to come up with this config by checking the documentation pages of vite and its various related tools. Luckily I found the GitHub issue and someone else had come up with the right incantation.
Now this new vite uses new tools, and their documentation is still lacking. I spent half an hour trying to figure out how vite (and related tools that I had to navigate and try to piece a coherent view of: esbuild, oxc, rolldown, etc.) might be convinced, but gave up and stayed with vite 7.
Someone could respond with a working solution and it would help, sure, but these tools sure as hell have documentation issues.
- spiros 7mo agoThe solution here is working for me: https://github.com/vitejs/vite/discussions/21505 https://github.com/vitejs/vite/discussions/21505 Though sometimes oxc complains about JSX in JS when running vite, but it still works fine.
- vite_throwaway 7mo agoThanks, I will consider this workaround later on. Another instance is the use of rollupOptions.output.manualChunks that now has to be rewritten, maybe that would be less frustrating to fathom.
- iainmerrick 7mo agoSorry if this comes across as overly facetious — I’m sure you have a reason for doing it that way! — but would it not be easier just to bow to convention and rename your .js files to .jsx?
- vite_throwaway 7mo agoProbably. It's just that I've always used .js for my projects (decades). Such a rename would likely result in configuration changes to the other tools I use, but indeed they are better documented. When faced with a multiplicity of conventions I pick one and stick to it; the tools are flexible enough to work with it I'm sure, the real issue is of discoverability.
- elondaits 7mo agoBut it’s not just convention… JSX files are not valid JS files. Also, as a programmer, I would be annoyed to open a JS file and find out it’s actually something else.
- ezfe 7mo agoI'm curious why you use `.js` files instead of `.jsx`? In my experience, using `jsx` files makes everything work better