Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conflict with vite-plugin-react #391

Open
7 of 9 tasks
gliheng opened this issue Apr 11, 2024 · 1 comment
Open
7 of 9 tasks

Conflict with vite-plugin-react #391

gliheng opened this issue Apr 11, 2024 · 1 comment
Labels
has workaround p2-has-workaround 🍰 Bug, but has workaround (priority)

Comments

@gliheng
Copy link

gliheng commented Apr 11, 2024

Related plugins

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

@gliheng
Copy link
Author

gliheng commented Apr 11, 2024

After some research, This line is causing the problem

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
has workaround p2-has-workaround 🍰 Bug, but has workaround (priority)
Projects
None yet
Development

No branches or pull requests

3 participants