Is there a reason why we can not use the esbuild option to specify loaded jsx for .js files?

[vivek12345]

First of all great work on this plugin. This is one of the problems I faced too while converting an existing app to vite, so thank you so much for building this.

I have one question though and this is after I went through the esbuild and vite docs. https://esbuild.github.io/content-types/#jsx https://vitejs.dev/config/#esbuild

So the docs for esbuild say that we can pass an option saying that the loader to be used for js files should be jsx.

esbuild app.js --bundle --loader:.js=jsx

Did you find any issues with using this option while converting an existing app to vite?

[jyash97]

Hey @vivek12345 👋

I did tried config option but failed to make it work, here is the journey why I created this utility:

Trying different configs 📝

I tried bunch of configs as mentioned in respective links: https://github.com/vitejs/vite/issues/769#issuecomment-777843876, https://github.com/vitejs/vite/discussions/3448#discussioncomment-749919 since there is no right way mentioned on docs. All this config didn't worked for me and I faced different errors with each config.

More on the extension by vite ⚡

vite was built keeping in mind the speed of development workflow and this comment explains the reason perfectly.

Analysing details 📊

After facing issues with configs and reading the reason behind the extension it made more sense to update the extension since this will make sure vite doesnt spend time in parsing and transforming .js files. The app that I was using had around 240 files [ 140 React components files and 100 js files ] , number of js files was significant that means if I change any js file the time required ( this will be still less ) to reload would increase because of parsing and transpiling.

Utility creation ⭐

At this time it was clear to update the extension name, but doing so manually would take me hours so searched over web for exisiting solution. I couldn't find any solution so went on to create the utility 🚀

Hope this answers your question 😄