Bug: `radix-ui` umbrella Avatar component pulls in CJS `require("react")` shim — crashes in ESM-only browser environments

[fs-projects]

Package: radix-ui (umbrella package, e.g. ^1.4.x)
Affected component: Avatar (via use-sync-external-store)
Environment: Vite 8 / Rolldown in library mode (build.lib), ESM output (format: 'es'), React/react-dom externalized

---

Summary

When building a Vite component library in ESM library mode with react externalized, importing Avatar from the radix-ui umbrella package causes the bundler to include a CJS interop shim for use-sync-external-store. That shim unconditionally calls require("react") at module evaluation time, crashing any browser that loads the ESM bundle.

---

Error

Uncaught Error: Calling `require` for "react" in an environment that doesn't expose the `require` function.
    at avatar-XXXXXXXX.esm.js:89

The crash happens immediately when the avatar chunk is evaluated — before any component renders.

---

Reproduction

Library (component package) — Vite config

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { glob } from "glob";
import path from "path";

export default defineConfig({
  plugins: [react(),....],
  server: {
    port: 3002,
  },
  resolve: {
    dedupe: ['react', 'react-dom'],
  },
  build: {
    lib: {
      entry: resolve(__dirname, 'src/main.ts'),
      formats: ['es'],
    },
    rolldownOptions: {
      external: [/^react($|\/)/, /^react-dom($|\/)/],
      input: Object.fromEntries(
        glob

          .sync('src/**/*.{ts,tsx}', {
            ignore: ['src/**/*.d.ts', 'src/_playground/**'],
          })

          .map((file) => {
            return [
              relative(
                'src',
                file.slice(0, file.length - extname(file).length),
              ),
              fileURLToPath(new URL(file, import.meta.url)),
            ];
          }),
      ),
      output: {
        entryFileNames: '[name].esm.js',
        assetFileNames: 'assets/[name][extname]',
        chunkFileNames: 'chunks/[name]-[hash].esm.js',
      },
    },
  },
});

Component source — avatar.tsx

// src/components/ui/avatar.tsx
import { Avatar as AvatarPrimitive } from "radix-ui"; // ← umbrella import

function Avatar(props: React.ComponentProps<typeof AvatarPrimitive.Root>) {
  return <AvatarPrimitive.Root {...props} />;
}

function AvatarImage(
  props: React.ComponentProps<typeof AvatarPrimitive.Image>,
) {
  return <AvatarPrimitive.Image {...props} />;
}

...
export { Avatar, AvatarImage, .... };

Barrel export — main.ts

// src/main.ts
export * from "./components/ui/avatar";
export * from "./components/ui/dropdown-menu";
// ...

Consumer app — any file importing from the library

// Any file in the consumer app:
import { Button } from "@your-org/ui";
// ↑ Because avatar is in the barrel, avatar.esm.js is eagerly evaluated,
//   triggering the require("react") call even if Avatar is never used.

---

What the bundler emits

The built avatar-XXXXXXXX.esm.js chunk contains roughly:

// avatar-XXXXXXXX.esm.js  (simplified)
import { createRequire } from "module";
const require = createRequire(import.meta.url); // works in Node
// — or the Rolldown/Rollup guard version: —
function o(mod) {
  if (typeof require !== "undefined") return require(mod);
  throw new Error(
    `Calling \`require\` for "${mod}" in an environment that doesn't expose the \`require\` function.`,
  );
}

// use-sync-external-store CJS shim calls it immediately:
var ReactDOM = o("react"); // ← throws in browser

The shared helper chunk (dist-XXXXXXXX.esm.js) defines the o() guard and is imported by both avatar and dropdown-menu chunks — but only avatar exercises the call path via use-sync-external-store.

---

Potential root cause

@radix-ui/react-avatar depends on use-sync-external-store/shim. That shim ships both a CJS and an ESM variant. When the umbrella radix-ui package re-exports Avatar, some resolution paths (particularly in Vite/Rolldown with preserveModules: true) resolve the shim to its CJS variant. The CJS variant unconditionally calls require("react") during module initialization, which is incompatible with pure-ESM browser environments.

Other radix primitives that do not depend on use-sync-external-store (e.g. DropdownMenu, Button/Slot) are not affected — their chunks import the shared guard helper but never invoke it.

---

Impact

Any consumer app (React SPA, Next.js client component, etc.) that:

1. Installs a component library built in Vite ESM library mode, and
2. Imports anything from that library's barrel entry

…will crash immediately on page load, even if they never use <Avatar>.

---

What I have tried

Use scoped package instead of umbrella

npm install @radix-ui/react-avatar

// Before:
import { Avatar as AvatarPrimitive } from "radix-ui";

// After:
import * as AvatarPrimitive from "@radix-ui/react-avatar";

Didn't work, same issue encountered.

Expected behaviour

The umbrella radix-ui package's Avatar re-export should resolve (or force Rolldown to pick) the ESM variant of use-sync-external-store/shim, preventing any require() call from appearing in ESM output.

---

Environment

radix-ui	^1.4.3
vite	^8.0.x
Bundler	Rolldown (Vite 8 default)
react	^19.x
Node	22.x
Build format	es (ESM library mode)
react externalized	Yes

[dbuddhadev13]

Hitting the same crash via the scoped @radix-ui/react-avatar package (no umbrella radix-ui), and bisecting the version range pinpoints the regression. Adding data here rather than filing a duplicate.

Independent reproduction

Setup: pnpm + Turborepo monorepo. packages/ui is a Vite library (Rolldown, ESM + CJS), consumed by Storybook in packages/storybook.

// packages/ui/vite.config.ts
build: {
  lib: {
    entry: resolve(__dirname, "src/index.ts"),
    formats: ["es", "cjs"],
  },
  rollupOptions: {
    external: ["react", "react-dom", "react/jsx-runtime"],
  },
},

// packages/ui/src/components/Avatar/AvatarRoot.tsx
import * as AvatarPrimitive from "@radix-ui/react-avatar";
// ...standard compound component re-export...

Open any Storybook story → browser throws immediately:

Uncaught Error: Calling `require` for "react" in an environment that doesn't expose the `require` function.
  at ../ui/dist/index.js:9:8
  at ../ui/dist/index.js:2768:11

Where the require ends up

Crucially the failing call is not in a Vite-served deps file — it's baked into the library's own built artifact packages/ui/dist/index.js:

// dist/index.js, around line 2768 (the use-sync-external-store/shim, inlined):
var a = x("react"), o = typeof Object.is == "function" ? Object.is : t,
    s = a.useState, c = a.useEffect, l = a.useLayoutEffect, ...

…where x is Rolldown's runtime __require shim defined at line 9:

var x = (...) => { ... if (typeof require < "u") return require.apply(this, arguments);
  throw Error("Calling `require` for ..."); };

Because use-sync-external-store/shim is not in rollupOptions.external, Rolldown inlines its CJS source into the library's ESM dist/index.js and wraps the inner require("./cjs/...") with the __require shim. Browser → boom. This means any Storybook-side workaround (optimizeDeps.include, resolve.alias for use-sync-external-store/shim) cannot fix it: the require() is no longer a separate import at runtime, it's already inlined into the consumer's bundle.

Version bisect — the regression is in @radix-ui/react-avatar

Walking @radix-ui/react-avatar versions:

Version	react-use-is-hydrated dep	Inlines CJS shim
1.1.5	❌ no	❌ no — clean
1.1.6	✅ 0.0.0	✅ yes — crashes
1.1.7 – 1.1.11	✅ 0.1.0	✅ yes — crashes

So 1.1.6 is the regressing release — that's where @radix-ui/react-use-is-hydrated was added as a dependency, and react-use-is-hydrated is what pulls in use-sync-external-store/shim.

@radix-ui/react-use-is-hydrated@0.1.0 source:

import { useSyncExternalStore } from "use-sync-external-store/shim";
// ...

The shim's index.js is CJS-only:

module.exports = require('./cjs/use-sync-external-store-shim.production.js');

…and the inner CJS file does var React = require("react") at module top-level.

Why 1.1.5 works

1.1.5 does not depend on react-use-is-hydrated at all — it never reaches the CJS shim, so nothing CJS gets inlined into the consumer library's ESM bundle.

Workaround

Pin @radix-ui/react-avatar to 1.1.5 in the consumer library:

- "@radix-ui/react-avatar": "^1.1.11",
+ "@radix-ui/react-avatar": "1.1.5",

Rebuild — dist/index.js no longer contains use-sync-external-store or the __require shim. Storybook loads cleanly.

Suggested fix (in react-use-is-hydrated)

React 18+ ships useSyncExternalStore natively from react. The shim is only needed for React 16/17 compatibility. Importing directly from react (or conditionally) would eliminate the CJS chain for any consumer on React 18+:

// instead of:
import { useSyncExternalStore } from "use-sync-external-store/shim";

// use:
import { useSyncExternalStore } from "react";

Given radix-ui peer-deps are already react ^16.8 || ^17 || ^18 || ^19, the shim is the safer fallback for 16/17 consumers — but bundlers handle this via package.json exports/browser conditions far better than the CJS shim does. Worth revisiting the import strategy in react-use-is-hydrated.

Environment

@radix-ui/react-avatar	1.1.6 – 1.1.11 (broken); 1.1.5 works
@radix-ui/react-use-is-hydrated	0.0.0, 0.1.0
vite	^8.0.8 (Rolldown)
react	19.2.5
storybook	10.3.5 (@storybook/nextjs-vite)
Build format	es + cjs library mode
Externalized	react, react-dom, react/jsx-runtime