'jsx' is not exported by node_modules/.pnpm/react@18.1.0/node_modules/react/jsx-runtime.js

[tajo]

Describe the bug

Testing the main branch (including vitejs/vite#8546) since vite@3-alpha10 doesn't work for production builds of Ladle.

• checkout https://github.com/tajo/ladle/tree/test-vite
• assumes it's next to built vite repo (using pnpm overrides)
• go to ladle/packages/example
• pnpm ladle build

Log:

➜  example git:(test-vite) y ladle build            
yarn run v1.22.18
$ /Users/vojtech/Projects/ladle/packages/example/node_modules/.bin/ladle build
vite v3.0.0-alpha.10 building for production...
transforming (50) ../../../example/node_modules/.vite/deps_build/react-dom_client.js'jsx' is not exported by '../../node_modules/.pnpm/react@18.1.0/node_modules/react/jsx-runtime.js'
'jsxs' is not exported by '../../node_modules/.pnpm/react@18.1.0/node_modules/react/jsx-runtime.js'
'Fragment' is not exported by '../../node_modules/.pnpm/react@18.1.0/node_modules/react/jsx-runtime.js'
✓ 64 modules transformed.

If you try to run the server with build folder you get some generic error:

Uncaught ReferenceError: module is not defined
    at index.6fff39be.js:9:2024

(Is there a simple way how I could do this repro with StackBlitz?)

Reproduction

https://github.com/tajo/ladle/tree/test-vite

System Info

System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Max
    Memory: 23.87 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.15.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Browsers:
    Chrome: 102.0.5005.61
    Firefox: 101.0
    Safari: 15.5

Used Package Manager

pnpm

Logs

No response

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.

[bluwy]

Is this still happening with the latest Vite version? The new optimizer might hide this issue unless you return to the old way with legacy.buildRollupPluginCommonjs.

[tajo]

It fixed the repro above (simpler setup) but still fails in https://github.com/uber/baseweb/pull/new/vite-beta

When running yarn ladle build:

'render' is not exported by node_modules/.vite/deps_build-99968c8c/react-dom.js, imported by node_modules/@ladle/react/lib/app/src/index.tsx
file: /Users/vojtech/Projects/baseweb/node_modules/@ladle/react/lib/app/src/index.tsx:4:0
2: import * as React from "react";
3: import * as ReactDOMClient from "react-dom/client";
4: import { render } from "react-dom";

If I change that import to

import * as ReactDOM from "react-dom";

it finishes the build but with a lot of warnings like this:

'useEffect' is not exported by 'node_modules/.vite/deps_build-99968c8c/react.js'
'createElement' is not exported by 'node_modules/.vite/deps_build-99968c8c/react.js'
'useEffect' is not exported by 'node_modules/.vite/deps_build-99968c8c/react.js'
'Component' is not exported by 'node_modules/.vite/deps_build-99968c8c/react.js'
'useLayoutEffect' is not exported by 'node_modules/.vite/deps_build-99968c8c/react.js'
'useEffect' is not exported by 'node_modules/.vite/deps_build-99968c8c/react.js'
'forwardRef' is not exported by 'node_modules/.vite/deps_build-99968c8c/react.js'
'useRef' is not exported by 'node_modules/.vite/deps_build-99968c8c/react.js'
'useEffect' is not exported by 'node_modules/.vite/deps_build-99968c8c/react.js'
'useEffect' is not exported by 'node_modules/.vite/deps_build-99968c8c/react.js'
'useState' is not exported by 'node_modules/.vite/deps_build-99968c8c/react.js'
'useCallback' is not exported by 'node_modules/.vite/deps_build-99968c8c/react.js'
'useMemo' is not exported by 'node_modules/.vite/deps_build-99968c8c/react.js'
'useRef' is not exported by 'node_modules/.vite/deps_build-99968c8c/react.js'

And the application is broken

index.9b229fea.js:1527 Uncaught TypeError: Class extends value undefined is not a constructor or null
    at index.9b229fea.js:1527:20599

Anyway, I started digging into the @vitejs/plugin-react and made some observations

• we use .js for flow + JSX files
• isProjectFile is a bit weird in ladle's scenario since the projectRoot is inside of the node_modules/@ladle/react/lib/app/src while stories are in an entirely different place (process.cwd())
• that makes shouldSkip also weird but I guess defining plugins through babelOptions.configFile should apply them to all the source code?

If you have any pointers what should I look into it would be appreciated. I really want to understand this better and fix it.

[tajo]

The build works fine with

legacy: {
  buildRollupPluginCommonjs: true
}

[vshab]

For me the issue is gone after using @vitejs/plugin-react 2.0.0-beta.1

[bluwy]

@tajo Sorry i've been busy and missed this. I'm not familiar enough with plugin-react to know the context behind the code, but re buildRollupPluginCommonjs: true working for you, we will be making that back as a default in Vite 3 so we can push stable out soon. vitejs/vite#8965

[tajo]

For me the issue is gone after using @vitejs/plugin-react 2.0.0-beta.1

"@vitejs/plugin-react": "2.0.0-beta.1",
"vite": "3.0.0-beta.7"

I still observe the issue.

[GiancarlosIO]

(I don't know if it's related but I get the same error when trying to shim the process for the browser)

import inject from '@rollup/plugin-inject';

export default defineConfig({
   plugins: [
      inject({
        ....,
        process: 'process/browser',
      }),
   ]
})

[aslanalyiev]

I think it is related to nodejs fs module. When you will add it, I guess you will get such error:

TypeError: Assignment to constant variable.

[sapphi-red]

I tested ladle with Vite 4 + plugin-react 3 with the following config (to enable build-time optimize-deps) and it worked.

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    disabled: false,
  },
  build: {
    commonjsOptions: {
      include: [],
    },
  },
});

Closing as I guess this is now fixed.

[nonara]

I am facing this exact issue with v3.0 and vite 4.0.2.

vite v4.0.2 building for production...
transforming (914) ..\..\node_modules\ahooks\es\useRequest\src\plugins\useCachePlugin.js"Fragment" is not exported by "../../node_modules/react/jsx-runti
me.js", imported by "react/jsx-runtime".
"jsx" is not exported by "../../node_modules/react/jsx-runtime.js", imported by "react/jsx-runtime".
"jsxs" is not exported by "../../node_modules/react/jsx-runtime.js", imported by "react/jsx-runtime".
✓ 926 modules transformed.
"useLayoutEffect" is not exported by "../../node_modules/react/index.js", imported by "../../node_modules/@chakra-ui/react-use-safe-layout-effect/dist/in
dex.esm.js".

This is my config:

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react()
  ],
  optimizeDeps: {
    include: [ '@portal/types' ],
  },
  build: {
    commonjsOptions: {
      include: [ /^@portal\/types(\/.+)?$/ ],
      defaultIsModuleExports: true,
    },
  }
});

I need to have the optimizeDeps and commonJs config. Any ideas on what I can do?

Edit

Dropping down to v2.2.0 and adding buildRollupPluginCommonjs: true drops the first warnings, but I still get the fatal error:

"useLayoutEffect" is not exported by "../../node_modules/react/index.js", imported by "../../node_modules/@chakra-ui/react-use-safe-layout-effect/dist/in
dex.esm.js".

[sapphi-red]

@nonara Would you create a new issue with reproduction? Thanks.