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

beeequeue · 2021-11-11T14:33:13Z

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

The text was updated successfully, but these errors were encountered:

tajo · 2021-11-12T21:08:24Z

I see the same problem in my similar yarn workspaces setup after upgrading to @vitejs/plugin-react@1.0.8.

React is undefined

I can create a repro if needed as well.

@vitejs/plugin-react@1.0.7 correctly replaces React.createElement with jsx-dev-runtime.

There are some changes about when transform-react-jsx is applied. So this might the culprit?

beeequeue · 2021-11-13T17:17:12Z

Can confirm that downgrading to 1.0.7 works for now. 😄

… JSX Fixes vitejs#5642

patak-dev · 2021-11-13T19:53:00Z

Please test with @vitejs/plugin-react@1.0.9

beeequeue · 2021-11-13T20:45:52Z

1.0.9 works in the reproduction!

tajo · 2021-11-14T05:32:52Z

1.0.9 works for me too, thanks!

beeequeue added the pending triage label Nov 11, 2021

Niputi added plugin: react regression The issue only appears after a new release labels Nov 13, 2021

aleclarson added a commit to aleclarson/vite that referenced this issue Nov 13, 2021

fix(plugin-react): automatic JSX runtime in linked pkgs w/ uncompiled…

e13a27d

… JSX Fixes vitejs#5642

aleclarson mentioned this issue Nov 13, 2021

fix(plugin-react): uncompiled JSX in linked pkgs #5669

Merged

aleclarson added a commit to aleclarson/vite that referenced this issue Nov 13, 2021

fix(plugin-react): automatic JSX runtime in linked pkgs w/ uncompiled…

da05ffd

… JSX Fixes vitejs#5642

patak-dev closed this as completed in #5669 Nov 13, 2021

Pernick mentioned this issue Nov 17, 2021

@vitejs/plugin-react - Inconsistent vendor reference #5608

Closed

7 tasks

github-actions bot locked and limited conversation to collaborators Nov 29, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

beeequeue commented Nov 11, 2021

tajo commented Nov 12, 2021 •

edited

Loading

beeequeue commented Nov 13, 2021

patak-dev commented Nov 13, 2021

beeequeue commented Nov 13, 2021

tajo commented Nov 14, 2021

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

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

Comments

beeequeue commented Nov 11, 2021

Describe the bug

Reproduction

System Info

Used Package Manager

Logs

Validations

tajo commented Nov 12, 2021 • edited Loading

beeequeue commented Nov 13, 2021

patak-dev commented Nov 13, 2021

beeequeue commented Nov 13, 2021

tajo commented Nov 14, 2021

tajo commented Nov 12, 2021 •

edited

Loading