Describe the bug

@vitejs/plugin-react processing files that defined in exclude option.

export default defineConfig({
  plugins: [
    react({
      exclude: /App/,
    }),
  ],
});

I was expecting @vitejs/plugin-react to bypass processing matching files and throw an error but it's still processing those files.

include and exclude filters are only checked when loading react-refresh plugin and jsx transforms are still processes for all jsx files:
https://github.com/vitejs/vite/blob/e8c840abd2767445a5e49bab6540a66b941d7239/packages/plugin-react/src/index.ts#L170

In my opinion we should do that on top of transform function by adding this:

async transform(code, id, options) {
  if (!filter(id)) {
    return
  }
  // ...  

Why I do this?

I'm currently using Solid and React on same project and both of them have their own jsx transform. I need to prevent them processing the same file. I have naming convention in my app .react.tsx for React components and .solid.tsx for Solid components. I didn't include Solid in my repro because vite-plugin-solid doesn't have an option to exclude files but I patched their plugin locally and will make a feature request on their repo.

Reproduction

https://stackblitz.com/edit/vitejs-vite-k286cf?file=vite.config.js&terminal=dev

System Info

System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.