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.

The solution here is working for me: https://github.com/vitejs/vite/discussions/21505

Though sometimes oxc complains about JSX in JS when running vite, but it still works fine.

Thanks, 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.

Sorry 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?

Probably. 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.

But 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.

I'm curious why you use `.js` files instead of `.jsx`? In my experience, using `jsx` files makes everything work better