Uncaught Error: Calling `require` for "react" in an environment that doesn't expose the `require` function.

[QiuYiLiang]

Describe the bug

使用rolldown-vite打包组件库，输出格式为es
在浏览器引入打包后的js,会报错
Uncaught Error: Calling requirefor "react" in an environment that doesn't expose therequire function.
使用vite打包正常

vite.config.ts

import react from '@vitejs/plugin-react-swc'

// https://vite.dev/config/
export default defineConfig({
  build: {
    lib: {
      entry: './src/index.tsx',
      formats: ['cjs', 'es']
    },
    rollupOptions: {
      external: ['react']
    },
    outDir: 'dist',
    minify: false
  },
  plugins: [react()],
})

index.ts

export const Button = () => {
  return <button>test</button>
}

Reproduction

https://stackblitz.com/edit/vitejs-rolldown-vite-r1urwj9h?file=vite.config.js,package.json,index.html

Steps to reproduce

1.打包
pnpm i
pnpm build
2.预览
pnpm dev
3.查看控制台，复现报错

System Info

Uncaught Error: Calling `require` for "react" in an environment that doesn't expose the `require` function.

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs and the Rolldown-related guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• 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.

[IWANABETHATGUY]

I found the root cause:
external: ['react'] only externalize the module that has the exact module specifier react, what you actually want is external react/jsx-runtime, so you could either use :
external: ['react/jsx-runtime'] or external: [/^react/]

[IWANABETHATGUY]

This is the output after apply my suggestion:

import { jsx } from "react/jsx-runtime";
const Button = () => {
	return /* @__PURE__ */ jsx("button", { children: "123" });
};
export { Button };

[QiuYiLiang]

I found the root cause: external: ['react'] only externalize the module that has the exact module specifier react, what you actually want is external react/jsx-runtime, so you could either use : external: ['react/jsx-runtime'] or external: [/^react/]

这样可以解决jsx的问题，但我发现了另一个问题,引入use-sync-external-store包也会触发同样的报错

export { useSyncExternalStore } from 'use-sync-external-store';

https://stackblitz.com/edit/vitejs-rolldown-vite-r1urwj9h?file=vite.config.js,package.json,index.html

[IWANABETHATGUY]

run pnpm list

dependencies:
react 19.1.0
react-dom 19.1.0

devDependencies:
@eslint/js 9.28.0                   @types/react-dom 19.1.6             eslint 9.28.0                       eslint-plugin-react-refresh 0.4.20  rolldown-vite 6.3.18                typescript-eslint 8.33.1            
@types/react 19.1.6                 @vitejs/plugin-react-swc 3.10.1     eslint-plugin-react-hooks 5.2.0     globals 16.2.0                      typescript 5.8.3                    

As you can see, use-sync-external-store is not installed locally, so you should also externalize it as well

    rollupOptions: {
      external: [/^react(\/.*)?$/, 'use-sync-external-store'],
    },

[QiuYiLiang]

run pnpm list运行 pnpm list

dependencies:
react 19.1.0
react-dom 19.1.0

devDependencies:
@eslint/js 9.28.0 @types/react-dom 19.1.6 eslint 9.28.0 eslint-plugin-react-refresh 0.4.20 rolldown-vite 6.3.18 typescript-eslint 8.33.1
@types/react 19.1.6 @vitejs/plugin-react-swc 3.10.1 eslint-plugin-react-hooks 5.2.0 globals 16.2.0 typescript 5.8.3
As you can see, use-sync-external-store is not installed locally, so you should also externalize it as well如您所见， use-sync-external-store 未在本地安装，因此您也应该将其外部化

rollupOptions: {
  external: [/^react(\/.*)?$/, 'use-sync-external-store'],
},

我制作用例的时候遗漏了安装依赖，但安装后，还是有这个问题
pnpm list

react 19.1.0
react-dom 19.1.0
use-sync-external-store 1.5.0

devDependencies:
@eslint/js 9.28.0                   eslint-plugin-react-refresh 0.4.20  
@types/react 19.1.6                 globals 16.2.0                      
@types/react-dom 19.1.6             rolldown-vite 6.3.17                
@vitejs/plugin-react-swc 3.10.1     typescript 5.8.3                    
eslint 9.28.0                       typescript-eslint 8.33.1            
eslint-plugin-react-hooks 5.2.0     ```