Skip to content

NextJS: Import next/dist with .js-extension for ESM compat #33380

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ndelangen merged 1 commit into from
Dec 29, 2025
+40 −40
Merged

NextJS: Import next/dist with .js-extension for ESM compat #33380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion code/frameworks/nextjs-vite/src/export-mocks/headers/cookies.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
// @ts-ignore we must ignore types here as during compilation they are not generated yet
import { headers } from '@storybook/nextjs-vite/headers.mock';

import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies';
import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies/index.js';
import { fn } from 'storybook/test';

class RequestCookiesMock extends RequestCookies {
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/nextjs-vite/src/export-mocks/headers/headers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers';
import { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers.js';
import { fn } from 'storybook/test';

class HeadersAdapterMock extends HeadersAdapter {
Expand Down
6 changes: 3 additions & 3 deletions code/frameworks/nextjs-vite/src/export-mocks/headers/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { draftMode as originalDraftMode } from 'next/dist/server/request/draft-mode';
import * as headers from 'next/dist/server/request/headers';
import { draftMode as originalDraftMode } from 'next/dist/server/request/draft-mode.js';
import * as headers from 'next/dist/server/request/headers.js';
Comment on lines +1 to +2

@coderabbitai coderabbitai Bot Dec 22, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Using internal Next.js implementation paths will cause module resolution failures.

The Next.js documentation specifies draft mode should be imported from 'next/headers', not from internal 'next/dist/server/request/draft-mode' paths which don't exist. This is causing active build failures in Storybook v10. Internal paths in next/dist/* are implementation details with no stability guarantees and should not be used for exports or mocks.

🤖 Prompt for AI Agents 
In code/frameworks/nextjs-vite/src/export-mocks/headers/index.ts lines 1-2, the
file imports from internal Next.js paths ('next/dist/server/request/...') which
breaks module resolution; replace those imports with the public Next.js
entrypoint by importing draftMode and headers from 'next/headers' (no /dist path
or .js extension), adjust local variable names to match (e.g., use draftMode
directly instead of originalDraftMode) and update any subsequent exports or
usages to re-export or mock the public API shapes so Storybook uses stable
public exports.

import { fn } from 'storybook/test';

// re-exports of the actual module
export * from 'next/dist/server/request/headers';
export * from 'next/dist/server/request/headers.js';

// mock utilities/overrides (as of Next v14.2.0)
export { headers } from './headers';
Expand Down
8 changes: 4 additions & 4 deletions code/frameworks/nextjs-vite/src/export-mocks/navigation/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { NextjsRouterMocksNotAvailable } from 'storybook/internal/preview-errors';

import * as actual from 'next/dist/client/components/navigation';
import { getRedirectError } from 'next/dist/client/components/redirect';
import { RedirectStatusCode } from 'next/dist/client/components/redirect-status-code';
import * as actual from 'next/dist/client/components/navigation.js';
import { RedirectStatusCode } from 'next/dist/client/components/redirect-status-code.js';
import { getRedirectError } from 'next/dist/client/components/redirect.js';
import type { Mock } from 'storybook/test';
import { fn } from 'storybook/test';

Expand Down Expand Up @@ -57,7 +57,7 @@ export const getRouter = () => {
};

// re-exports of the actual module
export * from 'next/dist/client/components/navigation';
export * from 'next/dist/client/components/navigation.js';

// mock utilities/overrides (as of Next v14.2.0)
export const redirect = fn(
Expand Down
4 changes: 2 additions & 2 deletions code/frameworks/nextjs-vite/src/export-mocks/router/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { NextjsRouterMocksNotAvailable } from 'storybook/internal/preview-errors';

import singletonRouter, * as originalRouter from 'next/dist/client/router';
import singletonRouter, * as originalRouter from 'next/dist/client/router.js';
import type { NextRouter, SingletonRouter } from 'next/router';
import type { Mock } from 'storybook/test';
import { fn } from 'storybook/test';
Expand Down Expand Up @@ -108,7 +108,7 @@ export const getRouter = () => {
};

// re-exports of the actual module
export * from 'next/dist/client/router';
export * from 'next/dist/client/router.js';
export default singletonRouter;

// mock utilities/overrides (as of Next v14.2.0)
Expand Down
4 changes: 2 additions & 2 deletions code/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import type { PropsWithChildren } from 'react';
import React, { useMemo } from 'react';

import initHeadManager from 'next/dist/client/head-manager';
import { HeadManagerContext } from 'next/dist/shared/lib/head-manager-context.shared-runtime';
import initHeadManager from 'next/dist/client/head-manager.js';
import { HeadManagerContext } from 'next/dist/shared/lib/head-manager-context.shared-runtime.js';

type HeadManagerValue = {
updateHead?: ((state: JSX.Element[]) => void) | undefined;
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/nextjs-vite/src/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { createNavigation } from '@storybook/nextjs-vite/navigation.mock';
// @ts-ignore we must ignore types here as during compilation they are not generated yet
import { createRouter } from '@storybook/nextjs-vite/router.mock';

import { isNextRouterError } from 'next/dist/client/components/is-next-router-error';
import { isNextRouterError } from 'next/dist/client/components/is-next-router-error.js';

import { HeadManagerDecorator } from './head-manager/decorator';
import { ImageDecorator } from './images/decorator';
Expand Down
6 changes: 3 additions & 3 deletions code/frameworks/nextjs-vite/src/routing/app-router-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ import {
AppRouterContext,
GlobalLayoutRouterContext,
LayoutRouterContext,
} from 'next/dist/shared/lib/app-router-context.shared-runtime';
} from 'next/dist/shared/lib/app-router-context.shared-runtime.js';
import {
PathParamsContext,
PathnameContext,
SearchParamsContext,
} from 'next/dist/shared/lib/hooks-client-context.shared-runtime';
import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment';
} from 'next/dist/shared/lib/hooks-client-context.shared-runtime.js';
import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment.js';

import type { RouteParams } from './types';

Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/nextjs-vite/src/routing/decorator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';

import type { Addon_StoryContext } from 'storybook/internal/types';

import { RedirectBoundary } from 'next/dist/client/components/redirect-boundary';
import { RedirectBoundary } from 'next/dist/client/components/redirect-boundary.js';

import { AppRouterProvider } from './app-router-provider';
import { PageRouterProvider } from './page-router-provider';
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/nextjs-vite/src/routing/page-router-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import React from 'react';
// @ts-ignore we must ignore types here as during compilation they are not generated yet
import { getRouter } from '@storybook/nextjs-vite/router.mock';

import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime';
import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime.js';

export const PageRouterProvider: React.FC<PropsWithChildren> = ({ children }) => (
<RouterContext.Provider value={getRouter()}>{children}</RouterContext.Provider>
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
// @ts-expect-error Compatibility for Next 14
export { draftMode } from 'next/dist/client/components/headers';
export { draftMode } from 'next/dist/client/components/headers.js';
4 changes: 2 additions & 2 deletions code/frameworks/nextjs/src/export-mocks/cache/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { unstable_cache } from 'next/dist/server/web/spec-extension/unstable-cache';
import { unstable_noStore } from 'next/dist/server/web/spec-extension/unstable-no-store';
import { unstable_cache } from 'next/dist/server/web/spec-extension/unstable-cache.js';
import { unstable_noStore } from 'next/dist/server/web/spec-extension/unstable-no-store.js';
import { fn } from 'storybook/test';

// mock utilities/overrides (as of Next v14.2.0)
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/nextjs/src/export-mocks/headers/cookies.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
// @ts-ignore we must ignore types here as during compilation they are not generated yet
import { headers } from '@storybook/nextjs/headers.mock';

import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies';
import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies/index.js';
import { fn } from 'storybook/test';

class RequestCookiesMock extends RequestCookies {
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/nextjs/src/export-mocks/headers/headers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers';
import { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers.js';
import { fn } from 'storybook/test';

class HeadersAdapterMock extends HeadersAdapter {
Expand Down
4 changes: 2 additions & 2 deletions code/frameworks/nextjs/src/export-mocks/headers/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as headers from 'next/dist/server/request/headers';
import * as headers from 'next/dist/server/request/headers.js';
import { fn } from 'storybook/test';

// re-exports of the actual module
export * from 'next/dist/server/request/headers';
export * from 'next/dist/server/request/headers.js';

// mock utilities/overrides (as of Next v14.2.0)
export { headers } from './headers';
Expand Down
8 changes: 4 additions & 4 deletions code/frameworks/nextjs/src/export-mocks/navigation/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { NextjsRouterMocksNotAvailable } from 'storybook/internal/preview-errors';

import * as actual from 'next/dist/client/components/navigation';
import { getRedirectError } from 'next/dist/client/components/redirect';
import { RedirectStatusCode } from 'next/dist/client/components/redirect-status-code';
import * as actual from 'next/dist/client/components/navigation.js';
import { RedirectStatusCode } from 'next/dist/client/components/redirect-status-code.js';
import { getRedirectError } from 'next/dist/client/components/redirect.js';
import type { Mock } from 'storybook/test';
import { fn } from 'storybook/test';

Expand Down Expand Up @@ -57,7 +57,7 @@ export const getRouter = () => {
};

// re-exports of the actual module
export * from 'next/dist/client/components/navigation';
export * from 'next/dist/client/components/navigation.js';

// mock utilities/overrides (as of Next v14.2.0)
export const redirect = fn(
Expand Down
4 changes: 2 additions & 2 deletions code/frameworks/nextjs/src/export-mocks/router/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { NextjsRouterMocksNotAvailable } from 'storybook/internal/preview-errors';

import singletonRouter, * as originalRouter from 'next/dist/client/router';
import singletonRouter, * as originalRouter from 'next/dist/client/router.js';
import type { NextRouter, SingletonRouter } from 'next/router';
import type { Mock } from 'storybook/test';
import { fn } from 'storybook/test';
Expand Down Expand Up @@ -108,7 +108,7 @@ export const getRouter = () => {
};

// re-exports of the actual module
export * from 'next/dist/client/router';
export * from 'next/dist/client/router.js';
export default singletonRouter;

// mock utilities/overrides (as of Next v14.2.0)
Expand Down
4 changes: 2 additions & 2 deletions code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import type { PropsWithChildren } from 'react';
import React, { useMemo } from 'react';

import initHeadManager from 'next/dist/client/head-manager';
import { HeadManagerContext } from 'next/dist/shared/lib/head-manager-context.shared-runtime';
import initHeadManager from 'next/dist/client/head-manager.js';
import { HeadManagerContext } from 'next/dist/shared/lib/head-manager-context.shared-runtime.js';

type HeadManagerValue = {
updateHead?: ((state: JSX.Element[]) => void) | undefined;
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/nextjs/src/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { createNavigation } from '@storybook/nextjs/navigation.mock';
// @ts-ignore we must ignore types here as during compilation they are not generated yet
import { createRouter } from '@storybook/nextjs/router.mock';

import { isNextRouterError } from 'next/dist/client/components/is-next-router-error';
import { isNextRouterError } from 'next/dist/client/components/is-next-router-error.js';

import { HeadManagerDecorator } from './head-manager/decorator';
import { ImageDecorator } from './images/decorator';
Expand Down
6 changes: 3 additions & 3 deletions code/frameworks/nextjs/src/routing/app-router-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ import {
AppRouterContext,
GlobalLayoutRouterContext,
LayoutRouterContext,
} from 'next/dist/shared/lib/app-router-context.shared-runtime';
} from 'next/dist/shared/lib/app-router-context.shared-runtime.js';
import {
PathParamsContext,
PathnameContext,
SearchParamsContext,
} from 'next/dist/shared/lib/hooks-client-context.shared-runtime';
import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment';
} from 'next/dist/shared/lib/hooks-client-context.shared-runtime.js';
import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment.js';

import type { RouteParams } from './types';

Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/nextjs/src/routing/decorator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';

import type { Addon_StoryContext } from 'storybook/internal/types';

import { RedirectBoundary } from 'next/dist/client/components/redirect-boundary';
import { RedirectBoundary } from 'next/dist/client/components/redirect-boundary.js';

import { AppRouterProvider } from './app-router-provider';
import { PageRouterProvider } from './page-router-provider';
Expand Down
2 changes: 1 addition & 1 deletion code/frameworks/nextjs/src/routing/page-router-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import React from 'react';

import { getRouter } from '@storybook/nextjs/router.mock';

import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime';
import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime.js';

export const PageRouterProvider: React.FC<PropsWithChildren> = ({ children }) => (
<RouterContext.Provider value={getRouter()}>{children}</RouterContext.Provider>
Expand Down
Loading