NextJS: Import next/dist with .js-extension for ESM compat#33380
Conversation
yue4u
changed the title
📝 WalkthroughWalkthroughModule specifiers for internal Next.js imports/exports were changed to include explicit Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
✨ Finishing touches
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (22)
🚧 Files skipped from review as they are similar to previous changes (16)
🧰 Additional context used📓 Path-based instructions (5)**/*.{js,jsx,json,html,ts,tsx,mjs}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
code/**/*.{ts,tsx,js,jsx,mjs}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
code/**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
code/**/*.{js,jsx,json,html,ts,tsx,mjs}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
🧠 Learnings (7)📓 Common learnings📚 Learning: 2025-11-28T14:50:24.889ZApplied to files:
📚 Learning: 2025-11-28T14:50:24.889ZApplied to files:
📚 Learning: 2025-11-24T17:49:59.279ZApplied to files:
📚 Learning: 2025-09-24T09:39:39.233ZApplied to files:
📚 Learning: 2025-11-05T09:38:47.712ZApplied to files:
📚 Learning: 2025-11-28T14:50:24.889ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
🔇 Additional comments (6)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (22)
code/frameworks/nextjs-vite/src/export-mocks/headers/cookies.tscode/frameworks/nextjs-vite/src/export-mocks/headers/headers.tscode/frameworks/nextjs-vite/src/export-mocks/headers/index.tscode/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs-vite/src/export-mocks/router/index.tscode/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs-vite/src/preview.tsxcode/frameworks/nextjs-vite/src/routing/app-router-provider.tsxcode/frameworks/nextjs-vite/src/routing/decorator.tsxcode/frameworks/nextjs-vite/src/routing/page-router-provider.tsxcode/frameworks/nextjs/src/compatibility/draft-mode.compat.tscode/frameworks/nextjs/src/export-mocks/cache/index.tscode/frameworks/nextjs/src/export-mocks/headers/cookies.tscode/frameworks/nextjs/src/export-mocks/headers/headers.tscode/frameworks/nextjs/src/export-mocks/headers/index.tscode/frameworks/nextjs/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/export-mocks/router/index.tscode/frameworks/nextjs/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs/src/preview.tsxcode/frameworks/nextjs/src/routing/app-router-provider.tsxcode/frameworks/nextjs/src/routing/decorator.tsxcode/frameworks/nextjs/src/routing/page-router-provider.tsx
🧰 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-vite/src/routing/app-router-provider.tsxcode/frameworks/nextjs-vite/src/preview.tsxcode/frameworks/nextjs-vite/src/routing/decorator.tsxcode/frameworks/nextjs-vite/src/export-mocks/headers/cookies.tscode/frameworks/nextjs/src/export-mocks/headers/cookies.tscode/frameworks/nextjs/src/export-mocks/router/index.tscode/frameworks/nextjs/src/routing/page-router-provider.tsxcode/frameworks/nextjs/src/routing/app-router-provider.tsxcode/frameworks/nextjs/src/export-mocks/headers/index.tscode/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/export-mocks/cache/index.tscode/frameworks/nextjs-vite/src/export-mocks/headers/headers.tscode/frameworks/nextjs-vite/src/export-mocks/router/index.tscode/frameworks/nextjs/src/compatibility/draft-mode.compat.tscode/frameworks/nextjs/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs-vite/src/routing/page-router-provider.tsxcode/frameworks/nextjs-vite/src/export-mocks/headers/index.tscode/frameworks/nextjs/src/routing/decorator.tsxcode/frameworks/nextjs/src/preview.tsxcode/frameworks/nextjs/src/export-mocks/headers/headers.tscode/frameworks/nextjs/src/export-mocks/navigation/index.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Enable TypeScript strict mode
Files:
code/frameworks/nextjs-vite/src/routing/app-router-provider.tsxcode/frameworks/nextjs-vite/src/preview.tsxcode/frameworks/nextjs-vite/src/routing/decorator.tsxcode/frameworks/nextjs-vite/src/export-mocks/headers/cookies.tscode/frameworks/nextjs/src/export-mocks/headers/cookies.tscode/frameworks/nextjs/src/export-mocks/router/index.tscode/frameworks/nextjs/src/routing/page-router-provider.tsxcode/frameworks/nextjs/src/routing/app-router-provider.tsxcode/frameworks/nextjs/src/export-mocks/headers/index.tscode/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/export-mocks/cache/index.tscode/frameworks/nextjs-vite/src/export-mocks/headers/headers.tscode/frameworks/nextjs-vite/src/export-mocks/router/index.tscode/frameworks/nextjs/src/compatibility/draft-mode.compat.tscode/frameworks/nextjs/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs-vite/src/routing/page-router-provider.tsxcode/frameworks/nextjs-vite/src/export-mocks/headers/index.tscode/frameworks/nextjs/src/routing/decorator.tsxcode/frameworks/nextjs/src/preview.tsxcode/frameworks/nextjs/src/export-mocks/headers/headers.tscode/frameworks/nextjs/src/export-mocks/navigation/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-vite/src/routing/app-router-provider.tsxcode/frameworks/nextjs-vite/src/preview.tsxcode/frameworks/nextjs-vite/src/routing/decorator.tsxcode/frameworks/nextjs-vite/src/export-mocks/headers/cookies.tscode/frameworks/nextjs/src/export-mocks/headers/cookies.tscode/frameworks/nextjs/src/export-mocks/router/index.tscode/frameworks/nextjs/src/routing/page-router-provider.tsxcode/frameworks/nextjs/src/routing/app-router-provider.tsxcode/frameworks/nextjs/src/export-mocks/headers/index.tscode/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/export-mocks/cache/index.tscode/frameworks/nextjs-vite/src/export-mocks/headers/headers.tscode/frameworks/nextjs-vite/src/export-mocks/router/index.tscode/frameworks/nextjs/src/compatibility/draft-mode.compat.tscode/frameworks/nextjs/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs-vite/src/routing/page-router-provider.tsxcode/frameworks/nextjs-vite/src/export-mocks/headers/index.tscode/frameworks/nextjs/src/routing/decorator.tsxcode/frameworks/nextjs/src/preview.tsxcode/frameworks/nextjs/src/export-mocks/headers/headers.tscode/frameworks/nextjs/src/export-mocks/navigation/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-vite/src/routing/app-router-provider.tsxcode/frameworks/nextjs-vite/src/preview.tsxcode/frameworks/nextjs-vite/src/routing/decorator.tsxcode/frameworks/nextjs-vite/src/export-mocks/headers/cookies.tscode/frameworks/nextjs/src/export-mocks/headers/cookies.tscode/frameworks/nextjs/src/export-mocks/router/index.tscode/frameworks/nextjs/src/routing/page-router-provider.tsxcode/frameworks/nextjs/src/routing/app-router-provider.tsxcode/frameworks/nextjs/src/export-mocks/headers/index.tscode/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/export-mocks/cache/index.tscode/frameworks/nextjs-vite/src/export-mocks/headers/headers.tscode/frameworks/nextjs-vite/src/export-mocks/router/index.tscode/frameworks/nextjs/src/compatibility/draft-mode.compat.tscode/frameworks/nextjs/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs-vite/src/routing/page-router-provider.tsxcode/frameworks/nextjs-vite/src/export-mocks/headers/index.tscode/frameworks/nextjs/src/routing/decorator.tsxcode/frameworks/nextjs/src/preview.tsxcode/frameworks/nextjs/src/export-mocks/headers/headers.tscode/frameworks/nextjs/src/export-mocks/navigation/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-vite/src/routing/app-router-provider.tsxcode/frameworks/nextjs-vite/src/preview.tsxcode/frameworks/nextjs-vite/src/routing/decorator.tsxcode/frameworks/nextjs-vite/src/export-mocks/headers/cookies.tscode/frameworks/nextjs/src/export-mocks/headers/cookies.tscode/frameworks/nextjs/src/export-mocks/router/index.tscode/frameworks/nextjs/src/routing/page-router-provider.tsxcode/frameworks/nextjs/src/routing/app-router-provider.tsxcode/frameworks/nextjs/src/export-mocks/headers/index.tscode/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/export-mocks/cache/index.tscode/frameworks/nextjs-vite/src/export-mocks/headers/headers.tscode/frameworks/nextjs-vite/src/export-mocks/router/index.tscode/frameworks/nextjs/src/compatibility/draft-mode.compat.tscode/frameworks/nextjs/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs-vite/src/routing/page-router-provider.tsxcode/frameworks/nextjs-vite/src/export-mocks/headers/index.tscode/frameworks/nextjs/src/routing/decorator.tsxcode/frameworks/nextjs/src/preview.tsxcode/frameworks/nextjs/src/export-mocks/headers/headers.tscode/frameworks/nextjs/src/export-mocks/navigation/index.ts
🧠 Learnings (25)
📓 Common learnings
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
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 **/*.{js,jsx,json,html,ts,tsx,mjs} : Use ESLint and Prettier configurations that are enforced in the codebase
📚 Learning: 2025-09-24T09:39:39.233Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.
Applied to files:
code/frameworks/nextjs-vite/src/preview.tsxcode/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/preview.tsxcode/frameworks/nextjs/src/export-mocks/navigation/index.ts
📚 Learning: 2025-11-05T09:38:47.712Z
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.
Applied to files:
code/frameworks/nextjs-vite/src/preview.tsxcode/frameworks/nextjs-vite/src/routing/decorator.tsxcode/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/routing/decorator.tsxcode/frameworks/nextjs/src/preview.tsxcode/frameworks/nextjs/src/export-mocks/navigation/index.ts
📚 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/**/*.{ts,tsx,js,jsx,mjs} : Use client-side logger from 'storybook/internal/client-logger' for browser code
Applied to files:
code/frameworks/nextjs-vite/src/preview.tsxcode/frameworks/nextjs-vite/src/routing/decorator.tsxcode/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/routing/decorator.tsxcode/frameworks/nextjs/src/preview.tsxcode/frameworks/nextjs/src/export-mocks/navigation/index.ts
📚 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: Follow existing patterns and conventions in the Storybook codebase
Applied to files:
code/frameworks/nextjs-vite/src/routing/decorator.tsxcode/frameworks/nextjs/src/routing/decorator.tsx
📚 Learning: 2025-11-05T09:37:25.920Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.
Applied to files:
code/frameworks/nextjs-vite/src/routing/decorator.tsxcode/frameworks/nextjs/src/routing/decorator.tsx
📚 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/**/*.{ts,tsx,js,jsx} : Export functions that need to be tested from their modules
Applied to files:
code/frameworks/nextjs/src/export-mocks/router/index.tscode/frameworks/nextjs/src/export-mocks/headers/index.tscode/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/export-mocks/cache/index.tscode/frameworks/nextjs-vite/src/export-mocks/headers/index.tscode/frameworks/nextjs/src/export-mocks/navigation/index.ts
📚 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/router/index.tscode/frameworks/nextjs/src/export-mocks/headers/index.tscode/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/export-mocks/cache/index.tscode/frameworks/nextjs-vite/src/export-mocks/headers/headers.tscode/frameworks/nextjs-vite/src/export-mocks/router/index.tscode/frameworks/nextjs/src/export-mocks/navigation/index.ts
📚 Learning: 2025-11-24T17:49:59.279Z
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 implementations should match the expected return type of the original function
Applied to files:
code/frameworks/nextjs/src/export-mocks/router/index.tscode/frameworks/nextjs/src/export-mocks/headers/index.tscode/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/export-mocks/cache/index.tscode/frameworks/nextjs-vite/src/export-mocks/router/index.tscode/frameworks/nextjs/src/export-mocks/navigation/index.ts
📚 Learning: 2025-11-24T17:49:59.279Z
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
Applied to files:
code/frameworks/nextjs/src/export-mocks/headers/index.tscode/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/export-mocks/cache/index.tscode/frameworks/nextjs/src/export-mocks/navigation/index.ts
📚 Learning: 2025-11-24T17:49:59.279Z
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} : Avoid mocking only a subset of required dependencies in Vitest tests
Applied to files:
code/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/export-mocks/cache/index.tscode/frameworks/nextjs-vite/src/export-mocks/headers/headers.tscode/frameworks/nextjs-vite/src/export-mocks/router/index.tscode/frameworks/nextjs/src/export-mocks/navigation/index.ts
📚 Learning: 2025-11-24T17:49:59.279Z
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} : Avoid inline mock implementations within test cases in Vitest tests
Applied to files:
code/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/export-mocks/cache/index.tscode/frameworks/nextjs-vite/src/export-mocks/headers/headers.tscode/frameworks/nextjs-vite/src/export-mocks/router/index.ts
📚 Learning: 2025-11-24T17:49:59.279Z
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} : Keep mock implementations simple and focused in Vitest tests
Applied to files:
code/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/export-mocks/cache/index.tscode/frameworks/nextjs-vite/src/export-mocks/headers/headers.tscode/frameworks/nextjs-vite/src/export-mocks/router/index.ts
📚 Learning: 2025-11-24T17:49:59.279Z
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} : Avoid direct function mocking without `vi.mocked()` in Vitest tests
Applied to files:
code/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs-vite/src/export-mocks/router/index.ts
📚 Learning: 2025-11-24T17:49:59.279Z
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} : Group related mocks together in Vitest tests
Applied to files:
code/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs-vite/src/export-mocks/headers/headers.tscode/frameworks/nextjs-vite/src/export-mocks/router/index.ts
📚 Learning: 2025-11-24T17:49:59.279Z
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} : Document complex mock behaviors in Vitest tests
Applied to files:
code/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/export-mocks/cache/index.tscode/frameworks/nextjs-vite/src/export-mocks/router/index.ts
📚 Learning: 2025-11-24T17:49:59.279Z
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 properties and methods that the test subject uses in Vitest tests
Applied to files:
code/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/export-mocks/cache/index.tscode/frameworks/nextjs-vite/src/export-mocks/headers/headers.tscode/frameworks/nextjs-vite/src/export-mocks/router/index.tscode/frameworks/nextjs/src/export-mocks/navigation/index.ts
📚 Learning: 2025-11-24T17:49:59.279Z
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} : Use `vi.mock()` with the `spy: true` option for all package and file mocks in Vitest tests
Applied to files:
code/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs-vite/src/export-mocks/router/index.ts
📚 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/**/*.{ts,tsx,js,jsx,mjs} : Use server-side logger from 'storybook/internal/node-logger' for Node.js code
Applied to files:
code/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/export-mocks/navigation/index.ts
📚 Learning: 2025-11-24T17:49:59.279Z
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} : Avoid mock implementations outside of `beforeEach` blocks in Vitest tests
Applied to files:
code/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/export-mocks/cache/index.tscode/frameworks/nextjs/src/export-mocks/navigation/index.ts
📚 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} : Write meaningful unit tests that actually import and call the functions being tested
Applied to files:
code/frameworks/nextjs/src/export-mocks/cache/index.ts
📚 Learning: 2025-11-24T17:49:31.838Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T17:49:31.838Z
Learning: Applies to **/*.{test,spec}.{ts,tsx} : Follow the spy mocking rules defined in `.cursor/rules/spy-mocking.mdc` for consistent mocking patterns with Vitest
Applied to files:
code/frameworks/nextjs/src/export-mocks/cache/index.tscode/frameworks/nextjs/src/export-mocks/navigation/index.ts
📚 Learning: 2025-11-24T17:49:59.279Z
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} : Implement mock behaviors in `beforeEach` blocks in Vitest tests
Applied to files:
code/frameworks/nextjs/src/export-mocks/cache/index.ts
📚 Learning: 2025-11-24T17:49:59.279Z
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} : Use type-safe mocking with `vi.mocked()` in Vitest tests
Applied to files:
code/frameworks/nextjs-vite/src/export-mocks/router/index.ts
📚 Learning: 2025-10-01T15:24:01.060Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
Applied to files:
code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: normal
🔇 Additional comments (23)
code/frameworks/nextjs-vite/src/routing/decorator.tsx (2)
5-5: LGTM: ESM-compatible import path.The addition of the
.jsextension aligns with ES module resolution requirements and resolves the module resolution issue in vitest environments.
15-15: LGTM: Consistent ESM module paths.The
.jsextensions on Next.js shared runtime imports ensure proper module resolution in ESM environments.Also applies to: 20-21
code/frameworks/nextjs-vite/src/preview.tsx (1)
14-14: LGTM: ESM path for error utility.The
.jsextension on theisNextRouterErrorimport ensures the error handling logic can resolve Next.js internals correctly in ESM mode.code/frameworks/nextjs/src/routing/decorator.tsx (1)
5-5: LGTM: Consistent ESM import path.Matches the equivalent change in the nextjs-vite framework, ensuring both framework variants support ESM module resolution.
code/frameworks/nextjs-vite/src/routing/page-router-provider.tsx (1)
11-11: LGTM: Page router ESM compatibility.The
.jsextension on the RouterContext import ensures the page router provider resolves correctly in ESM environments.code/frameworks/nextjs-vite/src/export-mocks/headers/headers.ts (1)
1-1: LGTM: Headers adapter ESM path.The
.jsextension on the HeadersAdapter import ensures the mock implementation can resolve Next.js server adapters in ESM mode.code/frameworks/nextjs/src/preview.tsx (1)
15-15: LGTM: Consistent across framework variants.Matches the equivalent ESM path update in nextjs-vite, ensuring error handling works in both framework implementations.
code/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsx (1)
4-5: LGTM: Head manager ESM imports.Both head-manager related imports now use explicit
.jsextensions for proper ESM resolution.code/frameworks/nextjs/src/export-mocks/router/index.ts (1)
3-3: LGTM - Consistent ESM import and re-export paths.Both the import and re-export statements are correctly updated with
.jsextensions, ensuring consistent module resolution.Also applies to: 111-111
code/frameworks/nextjs/src/export-mocks/headers/headers.ts (1)
1-1: LGTM - ESM-compatible import for HeadersAdapter.The import path correctly includes the
.jsextension for ESM compatibility.code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts (1)
2-2: LGTM - ESM-compatible re-export path.The
.jsextension addition maintains Next.js 14 compatibility while ensuring proper ESM resolution.code/frameworks/nextjs-vite/src/export-mocks/router/index.ts (1)
3-3: LGTM - Consistent ESM paths across frameworks.The import and re-export are correctly updated to match the non-Vite framework variant, ensuring consistent behavior.
Also applies to: 111-111
code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx (1)
4-5: LGTM - ESM-compatible imports for head manager.Both import paths correctly include
.jsextensions for ESM compatibility without affecting the component's functionality.code/frameworks/nextjs/src/routing/app-router-provider.tsx (1)
15-15: LGTM - ESM-compatible imports for app router contexts.All three import paths (app-router-context, hooks-client-context, and segment) correctly include
.jsextensions for ESM compatibility.Also applies to: 20-21
code/frameworks/nextjs/src/routing/page-router-provider.tsx (1)
11-11: Add .js extension for ESM/vitest module resolution.The
.jsextension is required for proper ESM module resolution in vitest environments, following Node.js ESM specification requirements that demand explicit file extensions.import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime.js';⛔ Skipped due to learnings
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} : Avoid mocking only a subset of required dependencies in Vitest testsLearnt from: CR Repo: storybookjs/storybook PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T17:49:31.838Z Learning: Applies to **/*.{test,spec}.{ts,tsx} : Test files should follow the naming pattern `*.test.ts`, `*.test.tsx`, `*.spec.ts`, or `*.spec.tsx`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} : Document complex mock behaviors in Vitest testsLearnt 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} : Avoid direct function mocking without `vi.mocked()` in Vitest testsLearnt 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} : Avoid inline mock implementations within test cases in Vitest testsLearnt 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} : Use `vi.mock()` with the `spy: true` option for all package and file mocks in Vitest testsLearnt 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} : Implement mock behaviors in `beforeEach` blocks in Vitest testsLearnt 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} : Avoid mocking without the `spy: true` option in Vitest testsLearnt 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} : Keep mock implementations simple and focused in Vitest testsLearnt 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} : Group related mocks together in Vitest testscode/frameworks/nextjs-vite/src/export-mocks/navigation/index.ts (1)
3-5: Code snippet does not match actual implementation - missing .js extensions in imports.The imports in the code snippet shown at lines 3-5 incorrectly claim to include
.jsextensions ('next/dist/client/components/navigation.js', etc.), but the actual code does not contain these extensions. The imports should be reviewed against the actual code state without the.jssuffix. While ESM-style imports with.jsextensions are valid and increasingly recommended for ESM resolution, any approval should be based on the actual code present, not speculative imports.Likely an incorrect or invalid review comment.
code/frameworks/nextjs/src/export-mocks/headers/cookies.ts (1)
8-8: Consistent with nextjs-vite variant.The
/index.jspath change is consistent with the nextjs-vite framework variant and correctly targets the compiled edge-runtime cookies index module.code/frameworks/nextjs/src/export-mocks/headers/index.ts (2)
1-1: Headers import paths updated correctly.The
.jsextensions added to the headers module import and re-export are consistent with the ESM compatibility objective.Also applies to: 5-5
19-19: Remove the suggestion to add.jsextension to the require() call.The file correctly uses each module system according to its specification: ESM imports include
.jsextensions (as required), while CommonJS require() omits them (as is standard practice). Node.js automatically resolves .js files when no extension is specified in CommonJS. The webpack alias comment explains that omitting.jsin the require() call is intentional to allow proper version-specific module resolution. This is not an inconsistency but proper usage of both module systems.code/frameworks/nextjs-vite/src/export-mocks/headers/cookies.ts (1)
8-8: The/index.jspath for compiled edge-runtime cookies is correct.This import follows the established pattern throughout the codebase for importing from compiled package directories in Next.js. The identical import already exists in the corresponding nextjs framework code, and all similar compiled package imports use the
/index.jsconvention for ESM module resolution.code/frameworks/nextjs/src/export-mocks/navigation/index.ts (1)
3-5: The .js extension imports for Next.js internal modules are correct and required for ESM compatibility.These paths exist in Next.js distribution and the .js extensions align with ESM specifications. No changes needed.
code/frameworks/nextjs/src/export-mocks/cache/index.ts (1)
1-2: Use public Next.js imports instead of internal module paths.Import
unstable_cacheandunstable_noStorefrom'next/cache', not from internal dist paths. The imports should be:import { unstable_cache } from 'next/cache'; import { unstable_noStore } from 'next/cache';The
@storybook/nextjs/cache.mockmodule provides mocked implementations of thenext/cachemodule's exports if Storybook-specific mocks are needed.Likely an incorrect or invalid review comment.
code/frameworks/nextjs-vite/src/routing/app-router-provider.tsx (1)
15-15: ESM-compatible import paths with.jsextensions.The updates correctly add
.jsextensions to Next.js internal module imports, which aligns with the PR objective of improving ESM compatibility for portable story tests using vitest. Type-only imports (line 10) are appropriately excluded from this update since they don't affect runtime resolution.Please verify that these Next.js module paths are valid in the Next.js versions supported by Storybook:
next/dist/shared/lib/app-router-context.shared-runtime.jsnext/dist/shared/lib/hooks-client-context.shared-runtime.jsnext/dist/shared/lib/segment.jsYou can verify by checking if these paths exist in the Next.js repository for the supported version range, or by confirming the tests pass after the change.
Also applies to: 20-21
| import { draftMode as originalDraftMode } from 'next/dist/server/request/draft-mode.js'; | ||
| import * as headers from 'next/dist/server/request/headers.js'; |
There was a problem hiding this comment.
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.
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 18 | 18 | 0 |
| Self size | 1.64 MB | 1.79 MB | 🚨 +153 KB 🚨 |
| Dependency size | 9.25 MB | 9.25 MB | 🚨 +12 B 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/builder-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 17 | 17 | 0 |
| Self size | 125 KB | 325 KB | 🚨 +200 KB 🚨 |
| Dependency size | 2.00 MB | 2.00 MB | 🚨 +12 B 🚨 |
| Bundle Size Analyzer | Link | Link |
storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 49 | 49 | 0 |
| Self size | 20.19 MB | 20.52 MB | 🚨 +332 KB 🚨 |
| Dependency size | 16.52 MB | 16.52 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/html-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 20 | 20 | 0 |
| Self size | 22 KB | 22 KB | 🎉 -1 B 🎉 |
| Dependency size | 2.16 MB | 2.36 MB | 🚨 +200 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 127 | 127 | 0 |
| Self size | 1.12 MB | 1.12 MB | 🚨 +197 B 🚨 |
| Dependency size | 21.78 MB | 21.98 MB | 🚨 +199 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/preact-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 20 | 20 | 0 |
| Self size | 13 KB | 13 KB | 🎉 -1 B 🎉 |
| Dependency size | 2.15 MB | 2.35 MB | 🚨 +200 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-native-web-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 159 | 159 | 0 |
| Self size | 30 KB | 30 KB | 🎉 -1 B 🎉 |
| Dependency size | 22.96 MB | 23.16 MB | 🚨 +199 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 117 | 117 | 0 |
| Self size | 35 KB | 35 KB | 🚨 +17 B 🚨 |
| Dependency size | 19.58 MB | 19.78 MB | 🚨 +199 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/svelte-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 24 | 24 | 0 |
| Self size | 55 KB | 56 KB | 🚨 +23 B 🚨 |
| Dependency size | 26.82 MB | 27.02 MB | 🚨 +200 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/sveltekit
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 25 | 25 | 0 |
| Self size | 56 KB | 56 KB | 🎉 -49 B 🎉 |
| Dependency size | 26.88 MB | 27.08 MB | 🚨 +200 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/vue3-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 114 | 114 | 0 |
| Self size | 35 KB | 35 KB | 🎉 -1 B 🎉 |
| Dependency size | 43.98 MB | 44.18 MB | 🚨 +200 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/web-components-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 21 | 21 | 0 |
| Self size | 19 KB | 19 KB | 🚨 +11 B 🚨 |
| Dependency size | 2.19 MB | 2.39 MB | 🚨 +200 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/cli
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 183 | 183 | 0 |
| Self size | 775 KB | 775 KB | 🎉 -236 B 🎉 |
| Dependency size | 67.24 MB | 67.58 MB | 🚨 +332 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/codemod
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 176 | 176 | 0 |
| Self size | 30 KB | 30 KB | 🎉 -36 B 🎉 |
| Dependency size | 65.82 MB | 66.15 MB | 🚨 +332 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
create-storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 50 | 50 | 0 |
| Self size | 999 KB | 999 KB | 0 B |
| Dependency size | 36.71 MB | 37.04 MB | 🚨 +332 KB 🚨 |
| Bundle Size Analyzer | node | node |
yue4u
force-pushed
the
fix-next-package-esm-compat
branch
from
1634bdc to
f2cabdc
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
code/frameworks/nextjs/src/export-mocks/headers/index.ts (1)
16-23: Add.jsextension to the require() call for consistency with ES module imports in this file.Line 19 uses
require('next/dist/server/request/draft-mode')without a file extension, while the ES module imports on lines 1 and 5 explicitly use.jsextensions:'next/dist/server/request/headers.js'. This inconsistency should be resolved by adding the extension:require('next/dist/server/request/draft-mode.js')to match the established pattern in the file and codebase.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (22)
code/frameworks/nextjs-vite/src/export-mocks/headers/cookies.tscode/frameworks/nextjs-vite/src/export-mocks/headers/headers.tscode/frameworks/nextjs-vite/src/export-mocks/headers/index.tscode/frameworks/nextjs-vite/src/export-mocks/navigation/index.tscode/frameworks/nextjs-vite/src/export-mocks/router/index.tscode/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs-vite/src/preview.tsxcode/frameworks/nextjs-vite/src/routing/app-router-provider.tsxcode/frameworks/nextjs-vite/src/routing/decorator.tsxcode/frameworks/nextjs-vite/src/routing/page-router-provider.tsxcode/frameworks/nextjs/src/compatibility/draft-mode.compat.tscode/frameworks/nextjs/src/export-mocks/cache/index.tscode/frameworks/nextjs/src/export-mocks/headers/cookies.tscode/frameworks/nextjs/src/export-mocks/headers/headers.tscode/frameworks/nextjs/src/export-mocks/headers/index.tscode/frameworks/nextjs/src/export-mocks/navigation/index.tscode/frameworks/nextjs/src/export-mocks/router/index.tscode/frameworks/nextjs/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs/src/preview.tsxcode/frameworks/nextjs/src/routing/app-router-provider.tsxcode/frameworks/nextjs/src/routing/decorator.tsxcode/frameworks/nextjs/src/routing/page-router-provider.tsx
🚧 Files skipped from review as they are similar to previous changes (16)
- code/frameworks/nextjs/src/export-mocks/cache/index.ts
- code/frameworks/nextjs-vite/src/export-mocks/router/index.ts
- code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx
- code/frameworks/nextjs-vite/src/preview.tsx
- code/frameworks/nextjs-vite/src/routing/decorator.tsx
- code/frameworks/nextjs/src/export-mocks/navigation/index.ts
- code/frameworks/nextjs/src/export-mocks/router/index.ts
- code/frameworks/nextjs/src/export-mocks/headers/cookies.ts
- code/frameworks/nextjs-vite/src/routing/page-router-provider.tsx
- code/frameworks/nextjs/src/routing/app-router-provider.tsx
- code/frameworks/nextjs/src/routing/page-router-provider.tsx
- code/frameworks/nextjs/src/routing/decorator.tsx
- code/frameworks/nextjs-vite/src/export-mocks/headers/headers.ts
- code/frameworks/nextjs/src/export-mocks/headers/headers.ts
- code/frameworks/nextjs-vite/src/export-mocks/headers/index.ts
- code/frameworks/nextjs-vite/src/export-mocks/navigation/index.ts
🧰 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/compatibility/draft-mode.compat.tscode/frameworks/nextjs/src/export-mocks/headers/index.tscode/frameworks/nextjs-vite/src/routing/app-router-provider.tsxcode/frameworks/nextjs-vite/src/export-mocks/headers/cookies.tscode/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs/src/preview.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Enable TypeScript strict mode
Files:
code/frameworks/nextjs/src/compatibility/draft-mode.compat.tscode/frameworks/nextjs/src/export-mocks/headers/index.tscode/frameworks/nextjs-vite/src/routing/app-router-provider.tsxcode/frameworks/nextjs-vite/src/export-mocks/headers/cookies.tscode/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs/src/preview.tsx
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/compatibility/draft-mode.compat.tscode/frameworks/nextjs/src/export-mocks/headers/index.tscode/frameworks/nextjs-vite/src/routing/app-router-provider.tsxcode/frameworks/nextjs-vite/src/export-mocks/headers/cookies.tscode/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs/src/preview.tsx
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/compatibility/draft-mode.compat.tscode/frameworks/nextjs/src/export-mocks/headers/index.tscode/frameworks/nextjs-vite/src/routing/app-router-provider.tsxcode/frameworks/nextjs-vite/src/export-mocks/headers/cookies.tscode/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs/src/preview.tsx
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/compatibility/draft-mode.compat.tscode/frameworks/nextjs/src/export-mocks/headers/index.tscode/frameworks/nextjs-vite/src/routing/app-router-provider.tsxcode/frameworks/nextjs-vite/src/export-mocks/headers/cookies.tscode/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsxcode/frameworks/nextjs/src/preview.tsx
🧠 Learnings (7)
📓 Common learnings
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.
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 **/*.{js,jsx,json,html,ts,tsx,mjs} : Use ESLint and Prettier configurations that are enforced in the codebase
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/**/*.{ts,tsx,js,jsx} : Export functions that need to be tested from their modules
📚 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
📚 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/**/*.{ts,tsx,js,jsx} : Export functions that need to be tested from their modules
Applied to files:
code/frameworks/nextjs/src/export-mocks/headers/index.ts
📚 Learning: 2025-11-24T17:49:59.279Z
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
Applied to files:
code/frameworks/nextjs/src/export-mocks/headers/index.ts
📚 Learning: 2025-09-24T09:39:39.233Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.
Applied to files:
code/frameworks/nextjs/src/preview.tsx
📚 Learning: 2025-11-05T09:38:47.712Z
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.
Applied to files:
code/frameworks/nextjs/src/preview.tsx
📚 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/**/*.{ts,tsx,js,jsx,mjs} : Use client-side logger from 'storybook/internal/client-logger' for browser code
Applied to files:
code/frameworks/nextjs/src/preview.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: normal
🔇 Additional comments (6)
code/frameworks/nextjs-vite/src/export-mocks/headers/cookies.ts (1)
8-8: ESM compatibility fix is correct.Adding the explicit
/index.jsextension is necessary for ESM module resolution in vitest and Node.js. The import pathnext/dist/compiled/@edge-runtime/cookies/index.jsenables proper ESM resolution when running portable story tests. This change aligns with documented vitest/ESM requirements where file extensions are required for proper module resolution, and is consistently applied across both thenextjs-viteandnextjsframeworks.code/frameworks/nextjs-vite/src/head-manager/head-manager-provider.tsx (1)
4-5: LGTM! Module paths updated for ESM compatibility.The explicit
.jsextensions correctly resolve Next.js internal modules for ESM environments. The comment on line 3-5 notes the singleton requirement, and these changes maintain that behavior while fixing resolution.code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts (1)
1-2: LGTM! Re-export path updated consistently.The
.jsextension on the re-export aligns with the broader PR changes to Next.js internal module paths. The comment indicates this is for Next.js 14 compatibility.code/frameworks/nextjs/src/export-mocks/headers/index.ts (1)
1-5: LGTM! Import and re-export paths updated consistently.Both the import and re-export from
next/dist/server/request/headersnow include the.jsextension, ensuring ESM compatibility while maintaining the mock utilities and overrides.code/frameworks/nextjs-vite/src/routing/app-router-provider.tsx (1)
15-21: LGTM! ESM-compatible module paths added.ESM imports require explicit file extensions per the ECMAScript spec. The explicit
.jsextensions on Next.js internal module imports align with the PR objective to fix ESM resolution issues for Next.js 14 and 15+. No logic changes, only module specifier updates that enable proper bundler resolution with Vite.code/frameworks/nextjs/src/preview.tsx (1)
15-15: LGTM! ESM compatibility fix applied correctly.The addition of the
.jsextension to the Next.js internal module import aligns with the established pattern across the codebase (42 similar imports consistently use.jsextensions) and addresses ESM module resolution requirements. The importedisNextRouterErrorfunction is properly used in error handling contexts (lines 44, 51, 85).
|
View your CI Pipeline Execution ↗ for commit f2cabdc ☁️ Nx Cloud last updated this comment at |
ndelangen
changed the title
next/dist with .js-extension for ESM compat
|
I've looked at the size diff repostings, and I think there's some malfunction there, the size increases do not make sense with this change, I suspect there's some cache, possibly due to this PR being from a fork? Something to look into for sure. |
|
Thank you @yue4u ! |
2 participants
Closes #33379
What I did
fix imports with
.jsextensionsChecklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>Summary by CodeRabbit
New Features
Chores
✏️ Tip: You can customize this high-level summary in your review settings.