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: <App /> 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

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] 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.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[gliheng]

After some research, This line is causing the problem https://github.com/vitejs/vite-plugin-vue/blob/fff40f67f05763d24e8c752fa98bcd08e19f7c82/packages/plugin-vue-jsx/src/index.ts#L52

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,
      };
    },
  };
}