Expand ESBuild loader prop to match ESBuild loader

[jrobber]

Clear and concise description of the problem

Currently Loader accepts a single string.

I'm trying to build and ship a library.
I'm importing a third party that depends on another 3rd party.
That nested third-party did the faux-pas of including JSX in JS.

This has been talked about here: #769.
And I agree with the premise that JSX should go in a JSX file. But in this case, the file is not in my control, and excluding it doesn't work because the build breaks before it can be excluded. Plus anyone else using my library down the line would still have to update their own builds to deal with this file. I'd rather transpile it and roll it up in my build.

Suggested solution

update options.esbuild.loader to support the same thing ESBuild does and pass it through. One of it's options currently accepts an object that allows you to map extensions to the desired loader.

Alternative

I've tried just excluding the third part in both esbuild.exclude and build.rollupOptions.external and the build still fails because it's trying to transpile a .js file from the third party.

Additional context

Reproduction steps:
add this dependency to your project: https://github.com/CareLuLu/react-native-web-ui-components

It requires: @expo/vector-icons

Which throws the error here:

> node_modules/.pnpm/@expo+vector-icons@12.0.5/node_modules/@expo/vector-icons/build/createIconSet.js:39:27: error: Unexpected "<"
    39 │                     return <Text />;

Only duplicate I found was the closed issue. But I feel the use case is different than the one outlined there and should be considered for validity.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[bluwy]

This is now possible with:

import { defineConfig } from 'vite'

export default defineConfig(() => ({
  esbuild: {
    loader: 'jsx',
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },
})

see #3448