Conflict with vite-plugin-react

[gliheng]

Related plugins

• plugin-vue

• plugin-vue-jsx

Describe the bug

I have a monorepo with some files using vue-jsx, and some uing react. I set include option for both plugins. But they still seem to conflict, triggering build error.

Reproduction

https://github.com/gliheng/vite-react-and-vue

Steps to reproduce

pnpm i and open http://localhost:5173/
In vite.config.ts, plugin-vue-jsx and plugin-react only one can be enabled, not both.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 2.35 GB / 15.86 GB
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.6.7 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: 123.0.6312.86
    Edge: Chromium (123.0.2420.65)
    Internet Explorer: 11.0.22621.1

Used Package Manager

pnpm

Logs

RollupError: [vite:build-import-analysis] [plugin vite:build-import-analysis] src/react-app/main.tsx (9:22): Failed to parse source for import analysis because the content contains invalid JS syntax. If you use tsconfig.json, make sure to not set jsx to preserve.
file: C:/Users/juju/Learn/gaga-react/src/react-app/main.tsx:9:22
7: <React.StrictMode>
8:
9: </React.StrictMode>,
^
10: )
at getRollupError (file:///C:/Users/juju/Learn/gaga-react/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:376:41)
at error (file:///C:/Users/juju/Learn/gaga-react/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:372:42)
at Object.error (file:///C:/Users/juju/Learn/gaga-react/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19410:20)
at Object.error (file:///C:/Users/juju/Learn/gaga-react/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:18520:42)
at Object.transform (file:///C:/Users/juju/Learn/gaga-react/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-B8QpfTwU.js:66540:22)

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

[gliheng]

After some research, This line is causing the problem

vite-plugin-vue/packages/plugin-vue-jsx/src/index.ts

Line 52 in fff40f6

include: /\.ts$/,

Since I use include to limit vue-jsx within a folder. It's not correct to assume esbuild can give up jsx transform for the whole project.

My temporary solution is to add a custom plugin to rewrite esbuild to the correct value.

export default defineConfig({
  plugins: [
    react({
      include: 'src/react-app/**/*.tsx',
    }),
    vue(),
    vueJsx({
      include: 'src/vue-app/**/*.tsx',
    }),
    fixEsBuild({
      include: /\.(m?ts|[jt]sx)$/,
      exclude: 'src/vue-app/**/*.tsx',
    }),
  ],
})

function fixEsBuild(config) {
  return {
    name: 'fix-esbuild',
    config() {
      return {
        esbuild: config,
      };
    },
  };
}