Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

@vitejs/plugin-react - Wrong JSX runtime used in linked dependency

See original GitHub issue

Describe the bug

I’m trying to test a module federation setup with react and vite, but ran into issues before getting to the federation parts.

When loading a linked dependency in a workspace the react plugin will build it with the old runtime (React.createElement) even though the application uses the new one.

See the repro repo for more details

Probably related to https://github.com/vitejs/vite/issues/5608

Reproduction

https://github.com/BeeeQueue/vite-react-monorepo/tree/repro

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 14.91 GB / 31.92 GB
  Binaries:
    Node: 16.10.0 - C:\Program Files\nvm\shims\node.EXE
    Yarn: 1.22.15 - C:\Program Files\nvm\shims\yarn.CMD
    npm: 7.24.0 - C:\Program Files\nvm\shims\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.44)

Used Package Manager

pnpm

Logs

❯ pnpm vite --debug
  vite:config bundled config file loaded in 126.21ms +0ms
  vite:config using resolved config: {
  vite:config   server: { fs: { strict: undefined, allow: [Array] } },
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:react-babel',
  vite:config     'vite:react-refresh',
  vite:config     'vite:react-jsx',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-script-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   resolve: { dedupe: [ 'react', 'react-dom' ], alias: [ [Object], [Object] ] },
  vite:config   optimizeDeps: {
  vite:config     include: [ 'react/jsx-dev-runtime' ],
  vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  vite:config   },
  vite:config   configFile: 'C:/dev/js/mf-vite-react/microfrontends/shell/vite.config.ts',
  vite:config   configFileDependencies: [ 'vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     server: {}
  vite:config   },
  vite:config   root: 'C:/dev/js/mf-vite-react/microfrontends/shell',
  vite:config   base: '/',
  vite:config   publicDir: 'C:\\dev\\js\\mf-vite-react\\microfrontends\\shell\\public',
  vite:config   cacheDir: 'C:\\dev\\js\\mf-vite-react\\microfrontends\\shell\\node_modules\\.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: false,
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +4ms
  vite:deps Hash is consistent. Skipping. Use --force to override. +0ms

  vite v2.6.14 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 251ms.

  vite:time 0.37ms / +0ms
  vite:spa-fallback Rewriting GET / to /index.html +0ms
  vite:time 14.01ms /index.html +111ms
  vite:resolve 1.09ms C:\dev\js\mf-vite-react\node_modules\.pnpm\vite@2.6.14\node_modules\vite\dist\client\client.mjs -> C:/dev/js/mf-vite-react/node_modules/.pnpm/vite@2.6.14/node_modules/vite/dist/client/client.mjs +0ms
  vite:resolve 1.74ms /@vite/client -> C:/dev/js/mf-vite-react/node_modules/.pnpm/vite@2.6.14/node_modules/vite/dist/client/client.mjs +0ms
  vite:load 0.76ms [fs] /@vite/client +0ms
  vite:resolve 0.65ms C:\dev\js\mf-vite-react\node_modules\.pnpm\vite@2.6.14\node_modules\vite\dist\client\env.mjs -> C:/dev/js/mf-vite-react/node_modules/.pnpm/vite@2.6.14/node_modules/vite/dist/client/env.mjs +9ms
  vite:resolve 0.86ms @vite/env -> C:/dev/js/mf-vite-react/node_modules/.pnpm/vite@2.6.14/node_modules/vite/dist/client/env.mjs +0ms
  vite:import-analysis 4.62ms [1 imports rewritten] C:/dev/js/mf-vite-react/node_modules/.pnpm/vite@2.6.14/node_modules/vite/dist/client/client.mjs +0ms
  vite:transform 7.10ms /@vite/client +0ms
  vite:time 13.71ms /@vite/client +97ms
  vite:resolve 0.42ms /src/index.tsx -> C:/dev/js/mf-vite-react/microfrontends/shell/src/index.tsx +6ms
  vite:load 0.00ms [plugin] /@react-refresh +14ms
  vite:import-analysis 0.71ms [no imports] /@react-refresh +6ms
  vite:transform 1.13ms /@react-refresh +6ms
  vite:time 1.80ms /@react-refresh +6ms
  vite:load 4.98ms [fs] ..\..\node_modules\.pnpm\vite@2.6.14\node_modules\vite\dist\client\env.mjs +2ms
  vite:import-analysis 1.01ms [no imports] C:/dev/js/mf-vite-react/node_modules/.pnpm/vite@2.6.14/node_modules/vite/dist/client/env.mjs +3ms
  vite:transform 1.32ms ..\..\node_modules\.pnpm\vite@2.6.14\node_modules\vite\dist\client\env.mjs +3ms
  vite:load 5.07ms [fs] /src/index.tsx +2ms
  vite:cache [memory] ..\..\node_modules\.pnpm\vite@2.6.14\node_modules\vite\dist\client\env.mjs +0ms
  vite:time 0.84ms ..\..\node_modules\.pnpm\vite@2.6.14\node_modules\vite\dist\client\env.mjs +188ms
  vite:resolve 0.08ms react-dom -> C:/dev/js/mf-vite-react/microfrontends/shell/node_modules/.vite/react-dom.js?v=e2617817&es-interop +198ms
  vite:resolve 0.48ms /node_modules/.vite/react-dom.js?v=e2617817&es-interop -> C:/dev/js/mf-vite-react/microfrontends/shell/node_modules/.vite/react-dom.js?v=e2617817&es-interop +0ms
  vite:resolve 0.90ms ./app -> C:/dev/js/mf-vite-react/microfrontends/shell/src/app.tsx +4ms
  vite:resolve 0.35ms /src/app.tsx -> C:/dev/js/mf-vite-react/microfrontends/shell/src/app.tsx +0ms
  vite:resolve 0.03ms react/jsx-dev-runtime -> C:/dev/js/mf-vite-react/microfrontends/shell/node_modules/.vite/react_jsx-dev-runtime.js?v=e2617817&es-interop +0ms
  vite:resolve 0.39ms /node_modules/.vite/react_jsx-dev-runtime.js?v=e2617817&es-interop -> C:/dev/js/mf-vite-react/microfrontends/shell/node_modules/.vite/react_jsx-dev-runtime.js?v=e2617817&es-interop +1ms
  vite:resolve 0.38ms /node_modules/.vite/react-dom.js?v=e2617817 -> C:/dev/js/mf-vite-react/microfrontends/shell/node_modules/.vite/react-dom.js?v=e2617817 +1ms
  vite:resolve 0.35ms /node_modules/.vite/react_jsx-dev-runtime.js?v=e2617817 -> C:/dev/js/mf-vite-react/microfrontends/shell/node_modules/.vite/react_jsx-dev-runtime.js?v=e2617817 +0ms
  vite:import-analysis 7.05ms [3 imports rewritten] src\index.tsx +200ms
  vite:transform 199.87ms /src/index.tsx +201ms
  vite:load 0.51ms [fs] /src/app.tsx +205ms
  vite:time 227.50ms /src/index.tsx +37ms
  vite:load 17.89ms [fs] /node_modules/.vite/react_jsx-dev-runtime.js?v=e2617817 +17ms
  vite:resolve 0.40ms ./chunk-7DB4K3L6.js -> C:/dev/js/mf-vite-react/microfrontends/shell/node_modules/.vite/chunk-7DB4K3L6.js +26ms
  vite:resolve 0.39ms /node_modules/.vite/chunk-7DB4K3L6.js?v=e2617817 -> C:/dev/js/mf-vite-react/microfrontends/shell/node_modules/.vite/chunk-7DB4K3L6.js?v=e2617817 +0ms
  vite:import-analysis 2.26ms [1 imports rewritten] node_modules\.vite\react_jsx-dev-runtime.js?v=e2617817 +26ms
  vite:transform 2.83ms /node_modules/.vite/react_jsx-dev-runtime.js?v=e2617817 +25ms
  vite:load 25.60ms [fs] /node_modules/.vite/react-dom.js?v=e2617817 +8ms
  vite:import-analysis 13.13ms [1 imports rewritten] node_modules\.vite\react-dom.js?v=e2617817 +29ms
  vite:transform [reuse pending] for /node_modules/.vite/chunk-7DB4K3L6.js?v=e2617817 +29ms
  vite:transform 13.93ms /node_modules/.vite/react-dom.js?v=e2617817 +0ms
  vite:resolve 3.18ms @mf/shared/src -> C:/dev/js/mf-vite-react/packages/shared/src/index.tsx +35ms
  vite:resolve 0.02ms react -> C:/dev/js/mf-vite-react/microfrontends/shell/node_modules/.vite/react.js?v=e2617817&es-interop +1ms
  vite:resolve 0.37ms /node_modules/.vite/react.js?v=e2617817&es-interop -> C:/dev/js/mf-vite-react/microfrontends/shell/node_modules/.vite/react.js?v=e2617817&es-interop +0ms
  vite:hmr [self-accepts] src\app.tsx +0ms
  vite:resolve 0.33ms /node_modules/.vite/react.js?v=e2617817 -> C:/dev/js/mf-vite-react/microfrontends/shell/node_modules/.vite/react.js?v=e2617817 +2ms
  vite:import-analysis 7.10ms [4 imports rewritten] src\app.tsx +9ms
  vite:transform 59.11ms /src/app.tsx +9ms
  vite:cache [memory] /@react-refresh +80ms
  vite:cache [memory] /node_modules/.vite/react_jsx-dev-runtime.js?v=e2617817 +1ms
  vite:cache [memory] /node_modules/.vite/react-dom.js?v=e2617817 +1ms
  vite:time 11.75ms /node_modules/.vite/react-dom.js?v=e2617817 +56ms
  vite:transform [reuse pending] for /src/app.tsx +31ms
  vite:cache [memory] /node_modules/.vite/react_jsx-dev-runtime.js?v=e2617817 +29ms
  vite:time 1.47ms /node_modules/.vite/react_jsx-dev-runtime.js?v=e2617817 +19ms
  vite:load 70.09ms [fs] /node_modules/.vite/chunk-7DB4K3L6.js?v=e2617817 +67ms
  vite:import-analysis 0.29ms [no imports] node_modules\.vite\chunk-7DB4K3L6.js?v=e2617817 +35ms
  vite:transform 0.66ms /node_modules/.vite/chunk-7DB4K3L6.js?v=e2617817 +4ms
  vite:load 33.56ms [fs] ..\..\packages\shared\src\index.tsx +3ms
  vite:load 41.91ms [fs] /node_modules/.vite/react.js?v=e2617817 +8ms
  vite:import-analysis 1.30ms [1 imports rewritten] node_modules\.vite\react.js?v=e2617817 +12ms
  vite:transform 1.60ms /node_modules/.vite/react.js?v=e2617817 +12ms
  vite:cache [memory] /node_modules/.vite/chunk-7DB4K3L6.js?v=e2617817 +15ms
  vite:time 17.57ms /src/app.tsx +15ms
  vite:hmr [self-accepts] C:/dev/js/mf-vite-react/packages/shared/src/index.tsx +54ms
  vite:import-analysis 1.38ms [2 imports rewritten] C:/dev/js/mf-vite-react/packages/shared/src/index.tsx +5ms
  vite:transform 16.05ms ..\..\packages\shared\src\index.tsx +6ms
  vite:cache [memory] /@react-refresh +6ms
  vite:cache [memory] /node_modules/.vite/react.js?v=e2617817 +0ms
  vite:cache [memory] /node_modules/.vite/chunk-7DB4K3L6.js?v=e2617817 +30ms
  vite:time 1.76ms /node_modules/.vite/chunk-7DB4K3L6.js?v=e2617817 +36ms
  vite:cache [memory] ..\..\packages\shared\src\index.tsx +12ms
  vite:time 0.72ms ..\..\packages\shared\src\index.tsx +11ms
  vite:cache [memory] /node_modules/.vite/react.js?v=e2617817 +2ms
  vite:time 0.94ms /node_modules/.vite/react.js?v=e2617817 +2ms
  vite:spa-fallback Not rewriting GET /src/favicon.svg because the path includes a dot (.) character. +729ms
  vite:time 0.83ms /src/favicon.svg +250ms
  vite:spa-fallback Rewriting GET / to /index.html +13s
  vite:time 4.54ms /index.html +13s
  vite:cache [memory] /@vite/client +13s
  vite:time 1.46ms /@vite/client +32ms
  vite:cache [memory] /src/index.tsx +1ms
  vite:time 0.76ms /src/index.tsx +2ms
  vite:cache [memory] /@react-refresh +24ms
  vite:time 0.47ms /@react-refresh +23ms
  vite:cache [memory] /node_modules/.vite/react-dom.js?v=e2617817 +9ms
  vite:time 15.39ms /node_modules/.vite/react-dom.js?v=e2617817 +24ms
  vite:cache [memory] /src/app.tsx +29ms
  vite:time 0.87ms /src/app.tsx +14ms
  vite:cache [memory] /node_modules/.vite/react_jsx-dev-runtime.js?v=e2617817 +1ms
  vite:time 1.25ms /node_modules/.vite/react_jsx-dev-runtime.js?v=e2617817 +2ms
  vite:cache [memory] ..\..\node_modules\.pnpm\vite@2.6.14\node_modules\vite\dist\client\env.mjs +5ms
  vite:time 0.91ms ..\..\node_modules\.pnpm\vite@2.6.14\node_modules\vite\dist\client\env.mjs +5ms
  vite:cache [memory] ..\..\packages\shared\src\index.tsx +33ms
  vite:time 0.96ms ..\..\packages\shared\src\index.tsx +33ms
  vite:cache [memory] /node_modules/.vite/react.js?v=e2617817 +2ms
  vite:time 0.79ms /node_modules/.vite/react.js?v=e2617817 +1ms
  vite:cache [memory] /node_modules/.vite/chunk-7DB4K3L6.js?v=e2617817 +7ms
  vite:time 1.76ms /node_modules/.vite/chunk-7DB4K3L6.js?v=e2617817 +8ms
  vite:spa-fallback Not rewriting GET /src/favicon.svg because the path includes a dot (.) character. +311ms
  vite:time 0.91ms /src/favicon.svg +162ms

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/vue-next 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.