require is not converted to import

[hong24]

Describe the bug

When using the external attribute to exclude React, import React via importmap.
When using SWR, the React dependency within use-sync-external-store isn't handled correctly and still relies on require.
After building and accessing the page, I encountered the following error:
Uncaught Error: Calling require for “react” in an environment that doesn't expose the require function.

I found a similar issue: #223. Even after excluding React using the esmExternalRequirePlugin's external option, I still encountered the same error.

export default defineConfig({
  build: {
    minify: false,
  },
  plugins: [
    react(),
    esmExternalRequirePlugin({
      external: ['react', /^use-sync-external-store(\/.*)?/]
    }),
    vitePluginImportMaps({
      react: "https://esm.newrank.cn/react@19.2.0",
      "react/": "https://esm.newrank.cn/react@19.2.0/",
      "react-dom": "https://esm.newrank.cn/react-dom@19.2.0",
      "react-dom/": "https://esm.newrank.cn/react-dom@19.2.0/",
    }),
  ],
});

The only solution was to add use-sync-external-store to the external list in rolldownOptions, but this is not the desired outcome.

export default defineConfig({
  build: {
    minify: false,
  },
  plugins: [
    react(),
    vitePluginImportMaps({
       react: "https://esm.sh/react@19.2.0",
      "react/": "https://esm.sh/react@19.2.0/",
      "react-dom": "https://esm.sh/react-dom@19.2.0",
      "react-dom/": "https://esm.sh/react-dom@19.2.0/",
      'use-sync-external-store/': "https://esm.sh/use-sync-external-store@1.6.0&external=react/",
    }),
  ],
});

Reproduction

https://github.com/hong24/test-vite8beta-report

Steps to reproduce

run pnpm i
run pnpm build
run pnpm dlx serve -s -n dist

The built code for use-sync-external-store contains var React$1 = __require(“react”);.

System Info

System:
    OS: Windows 11 10.0.26200
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12400
    Memory: 14.96 GB / 31.75 GB
  Binaries:
    Node: 22.21.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Users\luohong\AppData\Roaming\npm\yarn.CMD
    npm: 10.9.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.15.0 - C:\Users\luohong\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: 142.0.7444.176
    Edge: Chromium (140.0.3485.54)
    Firefox: 143.0.4 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @vitejs/plugin-react: ^5.1.1 => 5.1.1
    vite: 8.0.0-beta.0 => 8.0.0-beta.0

Used Package Manager

pnpm

Logs

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

The built code for use-sync-external-store contains var React$1 = __require(“react”);.

var require_use_sync_external_store_shim_production = /* @__PURE__ */ __commonJSMin(((exports) => {
	var React$1 = __require("react");
	function is(x, y) {
		return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
	}
	var objectIs = "function" === typeof Object.is ? Object.is : is, useState$1 = React$1.useState, useEffect$1 = React$1.useEffect, useLayoutEffect$1 = React$1.useLayoutEffect, useDebugValue$1 = React$1.useDebugValue;
	function useSyncExternalStore$2(subscribe, getSnapshot) {
		var value = getSnapshot(), _useState = useState$1({ inst: {
			value,
			getSnapshot
		} }), inst = _useState[0].inst, forceUpdate = _useState[1];
		useLayoutEffect$1(function() {
			inst.value = value;
			inst.getSnapshot = getSnapshot;
			checkIfSnapshotChanged(inst) && forceUpdate({ inst });
		}, [
			subscribe,
			value,
			getSnapshot
		]);
		useEffect$1(function() {
			checkIfSnapshotChanged(inst) && forceUpdate({ inst });
			return subscribe(function() {
				checkIfSnapshotChanged(inst) && forceUpdate({ inst });
			});
		}, [subscribe]);
		useDebugValue$1(value);
		return value;
	}
	function checkIfSnapshotChanged(inst) {
		var latestGetSnapshot = inst.getSnapshot;
		inst = inst.value;
		try {
			var nextValue = latestGetSnapshot();
			return !objectIs(inst, nextValue);
		} catch (error) {
			return !0;
		}
	}
	function useSyncExternalStore$1(subscribe, getSnapshot) {
		return getSnapshot();
	}
	var shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
	exports.useSyncExternalStore = void 0 !== React$1.useSyncExternalStore ? React$1.useSyncExternalStore : shim;
}));

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.