`'jsx' is not exported` error happens on build when importing non-transpiled react dependency #8468

sapphi-red · 2022-06-04T16:41:27Z

Describe the bug

The following error happens with vite build. It works without error during dev.

'jsx' is not exported by node_modules/.vite/deps_build/react_jsx-runtime.js, imported by node_modules/@reintroducing/my-package/Button.jsx
file: /home/projects/vitejs-vite-rwqysz/node_modules/@reintroducing/my-package/Button.jsx:2:9
1: import css from "./Button.module.scss";
2: import { jsx as _jsx } from "react/jsx-runtime";
            ^
3: const Button = ({
4:   children
error during build:
Error: 'jsx' is not exported by node_modules/.vite/deps_build/react_jsx-runtime.js, imported by node_modules/@reintroducing/my-package/Button.jsx
    at error (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:1870:30)
    at Module.error (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:12558:16)
    at Module.traceVariable (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:12917:29)
    at ModuleScope.findVariable (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:11573:39)
    at ReturnValueScope.findVariable (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:6437:38)
    at ChildScope.findVariable (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:6437:38)
    at Identifier.bind (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:7499:40)
    at CallExpression.bind (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:5268:23)
    at CallExpression.bind (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:8997:15)
    at ReturnStatement.bind (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:5268:23)

import Button from '@reintroducing/my-package';

function App() {
  return (
    <div className="App">
      <Button>button</Button>
    </div>
  );
}

export default App;

source code of @reintroducing/my-package
@reintroducing/my-package has button.jsx on the main field of package.json.

originaly reported: #8461 (comment)

Reproduction

https://stackblitz.com/edit/vitejs-vite-rwqysz?file=src%2FApp.jsx&terminal=dev

System Info

stackblitz

vite: 3.0.0-alpha.9
@vitejs/plugin-react: 2.0.0-alpha.2

Used Package Manager

npm

Logs

$ vite build --debug --force
  vite:config native esm config loaded in 1823.60ms URL {
  href: 'file:///home/projects/vitejs-vite-rwqysz/vite.config.js',
  origin: 'null',
  protocol: 'file:',
  username: '',
  password: '',
  host: '',
  hostname: '',
  port: '',
  pathname: '/home/projects/vitejs-vite-rwqysz/vite.config.js',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
} +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  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:optimized-deps-build',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:data-uri',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   force: true,
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
  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     force: true,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  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: { preserveSymlinks: undefined }
  vite:config   },
  vite:config   configFile: '/home/projects/vitejs-vite-rwqysz/vite.config.js',
  vite:config   configFileDependencies: [ '/home/projects/vitejs-vite-rwqysz/vite.config.js' ],
  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     force: true,
  vite:config     build: { force: true }
  vite:config   },
  vite:config   root: '/home/projects/vitejs-vite-rwqysz',
  vite:config   base: '/',
  vite:config   publicDir: '/home/projects/vitejs-vite-rwqysz/public',
  vite:config   cacheDir: '/home/projects/vitejs-vite-rwqysz/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   isProduction: true,
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  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   packageCache: Map(0) { set: [Function (anonymous)] },
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object]
  vite:config     ],
  vite:config     rollupOptions: {}
  vite:config   },
  vite:config   spa: true
  vite:config } +32ms
vite v3.0.0-alpha.9 building for production...
Forced re-optimization of dependencies
  vite:resolve 14.90ms react/jsx-dev-runtime -> /home/projects/vitejs-vite-rwqysz/node_modules/react/jsx-dev-runtime.js +0ms
transforming (6) node_modules/@reintroducing/my-package/Button.module.scss  vite:deps new dependencies found: react/jsx-dev-runtime
  vite:deps   react
  vite:deps   react-dom/client
  vite:deps   react/jsx-runtime { timestamp: true } +0ms
  vite:resolve 6.90ms react-dom -> /home/projects/vitejs-vite-rwqysz/node_modules/react-dom/index.js +0ms
  vite:resolve 2.40ms react -> /home/projects/vitejs-vite-rwqysz/node_modules/react/index.js +47ms
  vite:resolve 2.80ms scheduler -> /home/projects/vitejs-vite-rwqysz/node_modules/scheduler/index.js +464ms
  vite:deps deps bundled in 1365.30ms +1s
  vite:optimize-deps load /home/projects/vitejs-vite-rwqysz/node_modules/.vite/deps_build/react.js +0ms
  vite:optimize-deps load /home/projects/vitejs-vite-rwqysz/node_modules/.vite/deps_build/react-dom_client.js +1ms
  vite:optimize-deps load /home/projects/vitejs-vite-rwqysz/node_modules/.vite/deps_build/react_jsx-runtime.js +1ms
  vite:deps ✨ optimized dependencies unchanged { timestamp: true } +5ms
transforming (7) node_modules/.vite/deps_build/react.js  vite:optimize-deps load /home/projects/vitejs-vite-rwqysz/node_modules/.vite/deps_build/chunk-ZCKHECW2.js +788ms
  vite:optimize-deps load /home/projects/vitejs-vite-rwqysz/node_modules/.vite/deps_build/chunk-76J2PTFD.js +1ms
Error when using sourcemap for reporting an error: Can't resolve original location of error.
✓ 11 modules transformed.
'jsx' is not exported by node_modules/.vite/deps_build/react_jsx-runtime.js, imported by node_modules/@reintroducing/my-package/Button.jsx
file: /home/projects/vitejs-vite-rwqysz/node_modules/@reintroducing/my-package/Button.jsx:2:9
1: import css from "./Button.module.scss";
2: import { jsx as _jsx } from "react/jsx-runtime";
            ^
3: const Button = ({
4:   children
error during build:
Error: 'jsx' is not exported by node_modules/.vite/deps_build/react_jsx-runtime.js, imported by node_modules/@reintroducing/my-package/Button.jsx
    at error (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:1870:30)
    at Module.error (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:12558:16)
    at Module.traceVariable (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:12917:29)
    at ModuleScope.findVariable (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:11573:39)
    at ReturnValueScope.findVariable (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:6437:38)
    at ChildScope.findVariable (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:6437:38)
    at Identifier.bind (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:7499:40)
    at CallExpression.bind (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:5268:23)
    at CallExpression.bind (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:8997:15)
    at ReturnStatement.bind (file:///home/projects/vitejs-vite-rwqysz/node_modules/rollup/dist/es/shared/rollup.js:5268:23)

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

tyouzu1 · 2022-06-06T09:14:05Z

look like need add optimizeDeps to transform node_modules

optimizeDeps: {
   include: ['@reintroducing/my-package']
}

or filter node_modules jsx in here
https://github.com/vitejs/vite/blob/main/packages/plugin-react/src/index.ts#L210

@babel/plugin-transform-react-jsx transform @reintroducing/my-package to

import { jsx as _jsx } from "react/jsx-runtime"

but in fact need import es module .vite/deps_build/react_jsx-runtime

in DEV will transform to

import __vite__cjsImport6_react_jsxDevRuntime from "/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=2935c7f3"; 
const _jsxDEV = __vite__cjsImport6_react_jsxDevRuntime["jsxDEV"];

bluwy · 2022-06-08T15:58:02Z

Looks like a regression from #8280

The PR commented out the interop code for react/jsx-runtime:

vite/packages/plugin-react/src/index.ts

Line 383 in 909cf9c

load(id: string) {

I think it's working in dev because we apply interop for react in dev mode. The fix would probably to do the same in build mode.

Currently importAnalysis and importAnalysisBuild plugin has a lot of duplicating code, which might be worth refactoring along the way.

sapphi-red added pending triage bug inconsistency Inconsistency between dev & build and removed pending triage labels Jun 4, 2022

sapphi-red changed the title ~~'jsx' is not exported error happens on build when importing untranspiled react dependency~~ 'jsx' is not exported error happens on build when importing non-transpiled react dependency Jun 5, 2022

sapphi-red added the regression The issue only appears after a new release label Jun 10, 2022

sapphi-red added this to the 3.0 milestone Jun 10, 2022

This was referenced Jun 11, 2022

Setting build mode to "development" breaks React JSX transform #5885

Closed

fix(plugin-react): apply manual runtime interop #8546

Merged

patak-dev closed this as completed in #8546 Jun 12, 2022

github-actions bot locked and limited conversation to collaborators Jun 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`'jsx' is not exported` error happens on build when importing non-transpiled react dependency #8468

`'jsx' is not exported` error happens on build when importing non-transpiled react dependency #8468

sapphi-red commented Jun 4, 2022 •

edited

Loading

tyouzu1 commented Jun 6, 2022 •

edited

Loading

bluwy commented Jun 8, 2022

'jsx' is not exported error happens on build when importing non-transpiled react dependency #8468

'jsx' is not exported error happens on build when importing non-transpiled react dependency #8468

Comments

sapphi-red commented Jun 4, 2022 • edited Loading

Describe the bug

Reproduction

System Info

Used Package Manager

Logs

Validations

tyouzu1 commented Jun 6, 2022 • edited Loading

bluwy commented Jun 8, 2022

`'jsx' is not exported` error happens on build when importing non-transpiled react dependency #8468

`'jsx' is not exported` error happens on build when importing non-transpiled react dependency #8468

sapphi-red commented Jun 4, 2022 •

edited

Loading

tyouzu1 commented Jun 6, 2022 •

edited

Loading