`require('external')` is not converted to import

[hi-ogawa]

Describe the bug

When doing ssr build with noExternal: ["@vitejs/test-cjs-peer-react"] and following inputs:

• entry.js

import React from "react";
import testDep from "@vitejs/test-cjs-peer-react";
console.log({ React, testDep });

• @vitejs/test-cjs-peer-react

const React = require("react");
exports.test = React.useState;

Rolldown/Vite output looks like:

import { createRequire } from "node:module";
import React from "react"; // 👈👈
// ...
var __require = /* @__PURE__ */ createRequire(import.meta.url);
var require_test_cjs_peer_react = __commonJSMin((exports) => {
	const React$1 = __require("react");   // 👈👈
	exports.test = React$1.useState;
});
var import_test_cjs_peer_react = __toESM(require_test_cjs_peer_react());
console.log({
	React,
	testDep: import_test_cjs_peer_react.default
});

Rollup/Vite output looks like:

import require$$0 from "react"; // 👈👈
function getDefaultExportFromCjs(x) {
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
}
var testCjsPeerReact = {};
var hasRequiredTestCjsPeerReact;
function requireTestCjsPeerReact() {
  if (hasRequiredTestCjsPeerReact) return testCjsPeerReact;
  hasRequiredTestCjsPeerReact = 1;
  const React = require$$0;
  testCjsPeerReact.test = React.useState;
  return testCjsPeerReact;
}
var testCjsPeerReactExports = requireTestCjsPeerReact();
const testDep = /* @__PURE__ */ getDefaultExportFromCjs(testCjsPeerReactExports);
console.log({ React: require$$0, testDep });

My actual scenario is in hi-ogawa/vite-plugins#931 where I have dependency chain react-tweet -> swr -> use-sync-external-store -> react and configure noExternal: ["react-tweet"]. Project direct dependencies include only react and react-tweet, so react-tweet, swr, use-sync-external-store are bundled and only react is externalized.

I think this phenomena is same as lib mode issue raised in #223. Also a related rolldown feature is discussed in rolldown/rolldown#4575. I think we need a same behavior as rollup (perhaps commonjs plugin?) at rolldown-vite level at least.

---

Elaborating on why this is the issue for my use case, the reason why react-tweat is not externalized is because it's not a valid node package as it has css import inside. I could technically add noExternal: true and that should work, but I think for Vite users, there are various reasons to tweak this external/noExternal boundary for server build. Also __require("react") actually works fine when running the build output on node, but it failed on Cloudflare deployment because my build pipeline relies on 2nd build step to bundle externalized server deps.

Reproduction

https://stackblitz.com/github/hi-ogawa/reproductions/tree/main/rolldown-vite-deep-require-external

Steps to reproduce

./node_modules/rolldown-vite/bin/vite.js build
./node_modules/vite/bin/vite.js build

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @vitejs/test-cjs-peer-react: file:./fixtures/test-dep => undefined 
    rolldown-vite: 6.3.18 => 6.3.18 
    vite: latest => 6.3.5

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.

[sapphi-red]

I think we need some kind of migration path.

One idea would be:

• By default, don't convert require into import for platform: 'browser' and platform: 'neutral', but warn if there are any. This way users can notice that they may need to configure something. Also we can keep the default behavior legitimate.
• Add resolve.externalRequire (maybe build.externalRequire) option.
  • true: convert all require into import
  • [depName]: convert require(depName) into import
  • []: does not convert any requires
• For platform: 'node', maybe we can change the default output to use require in a seprate CJS file instead of using module.createRequire? This should be more easier for bundlers to handle.

[cyrilluce]

I think we need some kind of migration path.

One idea would be:

• By default, don't convert require into import for platform: 'browser' and platform: 'neutral', but warn if there are any. This way users can notice that they may need to configure something. Also we can keep the default behavior legitimate.

• Add resolve.externalRequire (maybe build.externalRequire) option.

  • true: convert all require into import
  • [depName]: convert require(depName) into import
  • []: does not convert any requires

• For platform: 'node', maybe we can change the default output to use require in a seprate CJS file instead of using module.createRequire? This should be more easier for bundlers to handle.

Any schedule to support this? I'm encountering same issue.

[GauthierPLM]

Similarly to @hi-ogawa, I encounter this issue with use-sync-external-store, which is used by zustand, a requirement for the platejs editor. I searched my whole node_modules, and use-sync-external-store is the only package that has a require("react") (or any call to require) that remain after building to ESM.

As mentioned in rolldown/rolldown#4575, the error only happens after deploying the code / at run, and no error is produced during build. It took me quite a lot of time to understand where the error came from.

[hi-ogawa]

@cyrilluce @GauthierPLM Can you elaborate a bit more how you hit this issue? is it from Vite lib mode or Vite react framework?

[cyrilluce]

@hi-ogawa Sure, I'm using custom plugin to replace external libs, it will replace externals import statement to other code.

In vite 5.x it works fine to CJS/UMD npm package (e.g. vuedraggable), which original code is

factory( require('vue'), ... )

With vite 5.x my plugin received:

import xx from 'vue'
factory( xx, ... )

but when upgraded to rolldown-vite, the code of CJS require were not transformed, so my plugin fail to replace it.

Currently I had add transform feature for require statement, but this obviously is a breaking change

[GauthierPLM]

@hi-ogawa I built a reproducible example from our internal lib and uploaded it here: https://github.com/GauthierPLM/vite-rolldown-require-react-bug-report/tree/main
The problem occurs only when rolldown-vite@latest is used and occurs with both "@vitejs/plugin-react-oxc": "0.3.0" and "@vitejs/plugin-react-swc": "3.11.0".
I tried with "@vitejs/plugin-react-oxc": "0.4.0-beta.0" and "vite": "npm:rolldown-vite@7.1.0-beta.0" but the problem persists.

Basically, we use this lib internally between multiple packages in our yarn workspace. It allows us to share our version of platejs between all our apps. I tried to remove the non-essential dependencies & stuff, but I may have missed something, so sorry if it's not clean.

The repo includes the dist folder so you can see (and compare) the build output with our current config. You can rebuild the package with yarn build.

I added the following config to vite to have it output individual files in dist/ to simplify tracking. Removing this config results in the same code output bundled in a single main.js:

//...
      rollupOptions: {
        output: {
          format: "es",
          preserveModules: true,
          preserveModulesRoot: "lib",
          entryFileNames: "[name].js",
        },
      }
//...

This is the list of places where __require is present (link below):

❯ rg -u '__require\\("react"\\)' dist/
dist/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.js
4:      var React = __require("react"), shim = require_shim();

dist/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js
9:              var React = __require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore = shim.useSyncExternalStore, useRef = React.useRef, useEffect = React.useEffect, useMemo = React.useMemo, useDebugValue = React.useDebugValue;

dist/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
45:             var React = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState = React.useState, useEffect = React.useEffect, useLayoutEffect = React.useLayoutEffect, useDebugValue = React.useDebugValue, didWarnOld18Alpha = !1, didWarnUncachedGetSnapshot = !1, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;

dist/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js
3:      var React = __require("react");

• https://github.com/GauthierPLM/vite-rolldown-require-react-bug-report/blob/main/dist/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.js#L4
• https://github.com/GauthierPLM/vite-rolldown-require-react-bug-report/blob/main/dist/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js#L9
• https://github.com/GauthierPLM/vite-rolldown-require-react-bug-report/blob/main/dist/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js#L45
• https://github.com/GauthierPLM/vite-rolldown-require-react-bug-report/blob/main/dist/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js#L3