nextjs - 💡(How to fix) Fix Turbopack: mixing direct and barrel imports of the same module causes undefined component at runtime [1 comments, 2 participants]

Link to the code that reproduces this issue

Internal monorepo — minimal reproduction described below.

To Reproduce

Setup: pnpm monorepo, Next.js (Pages Router) with Turbopack enabled.

A UI library package (@my-org/ui-lib) has a typography barrel file and direct sub-path exports:

// @my-org/ui-lib/package.json exports
{
  "./typography": "./typography/index.tsx",
  "./typography/Overline": "./typography/Overline.tsx",
  "./typography/Text": "./typography/Text.tsx"
}

// @my-org/ui-lib/typography/index.tsx (barrel)
export { default as Heading } from './Heading';
export { default as Overline } from './Overline';
export { default as Text } from './Text';

// @my-org/ui-lib/typography/Overline.tsx
import styled from 'styled-components';
export default styled.span`...`;

Consumer component mixes import styles for components from the same barrel:

// app/components/RoundsList.tsx
import { Text } from '@my-org/ui-lib/typography';           // barrel
import Overline from '@my-org/ui-lib/typography/Overline';   // direct

export const RoundsList = () => (
  <div>
    <Overline>label</Overline>   {/* <-- crashes: Overline is undefined */}
    <Text>value</Text>           {/* works fine */}
  </div>
);

This component is rendered lazily (inside an accordion that conditionally renders children with {isOpen && <RoundsList />}).

Other files in the same route import Overline via the barrel (import { Overline } from '@my-org/ui-lib/typography') and work fine — ~10 usages across the chunk, all through the barrel path.

Current vs. Expected behavior

Current: Overline is undefined at runtime → React error #130 (Element type is invalid: expected a string or class/function but got: undefined).

Expected: Both import styles should resolve to the same component.

Analysis from production chunks

Turbopack's barrel optimization creates separate module entries:

• Module 434297 (barrel-optimized): var o = e.i(663281); e.s(["Overline", () => o.default]) — used 10 times in the chunk, works.
• Module 663281 (direct import): defines the actual styled component with e.s(["default", 0, o], 663281) — used 1 time (in the broken component), resolves to undefined.

Module 663281 is defined in a different chunk than the consuming component. The barrel-optimized module 434297 has proper chunk dependency declarations, but the direct import path does not — so when the component lazily renders, module 663281's chunk hasn't loaded yet and .default is undefined.

Workaround

Change the direct import to use the barrel:

-import { Text } from '@my-org/ui-lib/typography';
-import Overline from '@my-org/ui-lib/typography/Overline';
+import { Overline, Text } from '@my-org/ui-lib/typography';

Environment

• Next.js: 15.x (Pages Router)
• Turbopack enabled (next dev --turbopack and production builds)
• pnpm monorepo with package.json exports map providing both barrel and direct sub-paths

Which area(s) are affected?

Turbopack

Which stage(s) are affected?

• next dev (Turbopack)
• next build (Turbopack)

Additional context

We've hit this same class of bug multiple times in our monorepo. A previous instance (different component, same root cause) was fixed by extracting the component from a barrel to break the conflicting module paths. The pattern seems to be: when Turbopack's barrel optimization is active and both direct and barrel import paths coexist for the same underlying module, the direct path's chunk dependencies aren't correctly tracked.