Next.js: Handle v14 compatibility for draftMode import #33341

tanujbhaud · 2025-12-11T17:27:29Z

Summary

Fixes #32950 - Build errors when using Storybook v10 with Next.js 14

The issue occurred because next/dist/server/request/draft-mode doesn't exist in Next.js 14, causing build failures. While webpack aliases were configured to handle this version difference, the static top-level import was failing before webpack could apply the aliases.

Changes

Replaced static import with dynamic require() in try-catch block
Added fallback to Next.js 14 location when the Next.js 15+ path doesn't exist
Preserved existing webpack alias functionality for proper path resolution

Technical Details

Next.js 14: draftMode is exported from next/dist/client/components/headers
Next.js 15+: draftMode is exported from next/dist/server/request/draft-mode

The webpack compatibility map already handles this via aliases, but we needed to defer the import to runtime to prevent build-time resolution errors.

Test plan

Verify builds succeed with Next.js 14
Verify builds succeed with Next.js 15+
Confirm webpack aliases still work correctly
Test that draftMode mocking functionality is preserved

Summary by CodeRabbit

Bug Fixes
- Improved draft mode initialization to handle varying module locations and enhance compatibility across different environments through better fallback mechanisms.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

valentinpalkovic · 2025-12-11T18:10:14Z

code/addons/vitest/src/updateVitestFile.ts

+import slash from 'slash';

 import { resolvePackageDir } from '../../../core/src/shared/utils/module';

 export const loadTemplate = async (name: string, replacements: Record<string, string>) => {
  let template = await fs.readFile(
    join(resolvePackageDir('@storybook/addon-vitest'), 'templates', name),
    'utf8'
  );
-  Object.entries(replacements).forEach(([key, value]) => (template = template.replace(key, value)));
+  // Normalize Windows paths (backslashes) to forward slashes for JavaScript string compatibility
+  Object.entries(replacements).forEach(
+    ([key, value]) => (template = template.replace(key, slash(value)))
+  );


This change doesn't relate to the linked issue. Can you remove it and open a new PR that describes what you want to solve?

Fixes storybookjs#32950 The issue occurred because the top-level import of 'next/dist/server/request/draft-mode' doesn't exist in Next.js 14. While webpack aliases were configured to redirect this import to the compatibility shim, the import statement itself was causing build failures before webpack could process it. Changed from a static top-level import to a dynamic require() with try-catch fallback. This allows the webpack alias to resolve the correct location based on Next.js version while gracefully falling back to the Next.js 14 location if needed. - Next.js 14: draftMode is in 'next/dist/client/components/headers' - Next.js 15+: draftMode is in 'next/dist/server/request/draft-mode'

tanujbhaud · 2025-12-11T18:30:35Z

Fixed! I've removed the unrelated Windows paths commit and rebased the branch cleanly from next. The PR now only contains the Next.js 14 draftMode compatibility fix for issue #32950.

The Windows paths fix will remain in PR #33340 which addresses issue #31768 separately.

nx-cloud · 2025-12-12T04:16:13Z

View your CI Pipeline Execution ↗ for commit fd9698a

☁️ Nx Cloud last updated this comment at 2025-12-12 07:46:05 UTC

coderabbitai · 2025-12-12T04:19:42Z

📝 Walkthrough

Walkthrough

Modifies draftMode resolution in a Next.js headers mock to use runtime try/catch with require() and fallback instead of direct top-level import, avoiding hard build-time dependency.

Changes

Cohort / File(s)	Summary
Runtime draftMode resolution `code/frameworks/nextjs/src/export-mocks/headers/index.ts`	Replaces direct top-level import with runtime resolution via try/catch using `require('next/dist/server/request/draft-mode').draftMode`, with fallback to `(headers as any).draftMode` if unavailable.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Verify the try/catch handles all expected module loading scenarios correctly
Confirm fallback behavior works as intended when primary import path is unavailable
Assess performance implications of runtime require() calls and consider caching if needed

✨ Finishing touches

📝 Generate docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

code/frameworks/nextjs/src/export-mocks/headers/index.ts (1)
25-26: Consider adding a defensive null-check for clarity and consistency, but the current implementation is functionally sound.

The try-catch fallback (lines 17-23) correctly handles Next.js version compatibility. However, if both resolution paths fail, originalDraftMode would be undefined. While this is unlikely due to webpack alias handling, adding a null-check would be consistent with defensive error handling used elsewhere in the codebase (e.g., navigation/index.ts):
if (!originalDraftMode) {
  throw new Error('Failed to resolve draftMode from Next.js');
}
const draftMode = fn(originalDraftMode).mockName('draftMode');
This is optional but recommended for better error visibility if the Next.js module structure changes.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6f262ad and fd9698a.

📒 Files selected for processing (1)

code/frameworks/nextjs/src/export-mocks/headers/index.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use ESLint and Prettier configurations that are enforced in the codebase

Files:

code/frameworks/nextjs/src/export-mocks/headers/index.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode

Files:

code/frameworks/nextjs/src/export-mocks/headers/index.ts

code/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

code/**/*.{ts,tsx,js,jsx,mjs}: Use server-side logger from 'storybook/internal/node-logger' for Node.js code
Use client-side logger from 'storybook/internal/client-logger' for browser code
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

code/frameworks/nextjs/src/export-mocks/headers/index.ts

code/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Export functions that need to be tested from their modules

Files:

code/frameworks/nextjs/src/export-mocks/headers/index.ts

code/**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

code/**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier with --write flag to format code before committing
Run ESLint with yarn lint:js:cmd to check for linting issues and fix errors before committing

Files:

code/frameworks/nextjs/src/export-mocks/headers/index.ts

🧠 Learnings (11)

📓 Common learnings

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Mock all required dependencies that the test subject uses

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.889Z
Learning: Applies to code/**/*.{test,spec}.{ts,tsx,js,jsx} : Mock external dependencies using vi.mock() for file system, loggers, and other external dependencies in tests

📚 Learning: 2025-11-28T14:50:24.889Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.889Z
Learning: Applies to code/**/*.{test,spec}.{ts,tsx,js,jsx} : Mock external dependencies using vi.mock() for file system, loggers, and other external dependencies in tests

Applied to files:

code/frameworks/nextjs/src/export-mocks/headers/index.ts