[GH-ISSUE #137] feat: optimize barrel imports for RSC-incompatible packages #31

New issue

Closed

opened 2026-05-06 12:36:40 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-06 12:36:40 +02:00

Owner

Originally created by @gentritbiba on GitHub (Feb 26, 2026).
Original GitHub issue: https://github.com/cloudflare/vinext/issues/137

Problem

Barrel imports from packages like radix-ui, lucide-react, recharts, and others cause crashes in React Server Components (RSC) environments:

React.createContext is not a function

Root cause: Vite's dev server eagerly evaluates all transitive modules in a barrel. When import { Slot } from "radix-ui" is encountered, Vite loads all 30+ re-exported sub-packages. Some of these (e.g., @radix-ui/react-direction) call React.createContext() at module top-level, which doesn't exist in the react-server condition.

Next.js avoids this via experimental.optimizePackageImports — SWC rewrites barrel imports to direct sub-module imports at compile time.

Reported in #100.

Solution

Add a vinext:optimize-imports Vite plugin that rewrites barrel imports into direct sub-module imports on the server:

import { Slot } from "radix-ui"
→ import * as Slot from "@radix-ui/react-slot"

The plugin:

Parses barrel entry files to build an export map (which export comes from which sub-package)
Handles all re-export patterns: export * as X, export { A, B }, export { default as X }, import * as X; export { X }
Uses a resolveId hook so sub-packages resolve correctly under pnpm strict hoisting
Only runs on server environments (RSC/SSR) — the client uses Vite's dep optimizer which handles barrels correctly
Respects experimental.optimizePackageImports from next.config and includes sensible defaults (same list as Next.js)

Packages optimized by default

lucide-react, date-fns, lodash-es, rxjs, @headlessui/react, @heroicons/react/20/solid, @heroicons/react/24/solid, @heroicons/react/24/outline, @tremor/react, @mui/material, @mui/icons-material, recharts, react-bootstrap, antd, @ant-design/icons, ahooks, @tabler/icons-react, radix-ui

Originally created by @gentritbiba on GitHub (Feb 26, 2026). Original GitHub issue: https://github.com/cloudflare/vinext/issues/137 ## Problem Barrel imports from packages like `radix-ui`, `lucide-react`, `recharts`, and others cause crashes in React Server Components (RSC) environments: ``` React.createContext is not a function ``` **Root cause:** Vite's dev server eagerly evaluates all transitive modules in a barrel. When `import { Slot } from "radix-ui"` is encountered, Vite loads all 30+ re-exported sub-packages. Some of these (e.g., `@radix-ui/react-direction`) call `React.createContext()` at module top-level, which doesn't exist in the `react-server` condition. Next.js avoids this via `experimental.optimizePackageImports` — SWC rewrites barrel imports to direct sub-module imports at compile time. Reported in #100. ## Solution Add a `vinext:optimize-imports` Vite plugin that rewrites barrel imports into direct sub-module imports on the server: ``` import { Slot } from "radix-ui" → import * as Slot from "@radix-ui/react-slot" ``` The plugin: - Parses barrel entry files to build an export map (which export comes from which sub-package) - Handles all re-export patterns: `export * as X`, `export { A, B }`, `export { default as X }`, `import * as X; export { X }` - Uses a `resolveId` hook so sub-packages resolve correctly under pnpm strict hoisting - Only runs on server environments (RSC/SSR) — the client uses Vite's dep optimizer which handles barrels correctly - Respects `experimental.optimizePackageImports` from `next.config` and includes sensible defaults (same list as Next.js) ## Packages optimized by default `lucide-react`, `date-fns`, `lodash-es`, `rxjs`, `@headlessui/react`, `@heroicons/react/20/solid`, `@heroicons/react/24/solid`, `@heroicons/react/24/outline`, `@tremor/react`, `@mui/material`, `@mui/icons-material`, `recharts`, `react-bootstrap`, `antd`, `@ant-design/icons`, `ahooks`, `@tabler/icons-react`, `radix-ui`