gliheng
commented
5 months ago 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,
};
},
};
}
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
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:
8:
Validations