Skip to content

Next.js: Add support for v16.2#34046

Merged
valentinpalkovic merged 2 commits into
nextfrom
valentin/fix-support-for-next-16.2
Mar 6, 2026
Merged

Next.js: Add support for v16.2#34046
valentinpalkovic merged 2 commits into
nextfrom
valentin/fix-support-for-next-16.2

Conversation

@valentinpalkovic
Copy link
Copy Markdown
Contributor

@valentinpalkovic valentinpalkovic commented Mar 6, 2026

Closes #

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

Caution

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

  • Make 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/core team 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

  • Refactor
    • Improved Next.js version compatibility handling in the SWC loader configuration by implementing dynamic import resolution with fallback support for multiple Next.js versions.

@valentinpalkovic valentinpalkovic self-assigned this Mar 6, 2026
@valentinpalkovic valentinpalkovic added bug ci:daily Run the CI jobs that normally run in the daily job. labels Mar 6, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 6, 2026

Fails
🚫 The "#### Manual testing" section must be filled in. Please describe how to test the changes you've made, step by step, so that reviewers can confirm your PR works as intended.

Generated by 🚫 dangerJS against 02dfa45

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented Mar 6, 2026

View your CI Pipeline Execution ↗ for commit 02dfa45

Command Status Duration Result
nx run-many -t compile -c production --parallel=1 ✅ Succeeded 6m 12s View ↗

☁️ Nx Cloud last updated this comment at 2026-03-06 14:15:25 UTC

@valentinpalkovic valentinpalkovic force-pushed the valentin/fix-support-for-next-16.2 branch from 12a66fd to 2951962 Compare March 6, 2026 13:48
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Mar 6, 2026

📝 Walkthrough

Walkthrough

The SWC loader in Next.js framework has been refactored to dynamically resolve browser support configuration at runtime. The change replaces static import with an async helper that intelligently determines the correct Next.js module path based on version compatibility, supporting both v16.2+ and older releases.

Changes

Cohort / File(s) Summary
Next.js SWC Loader Async Refactoring
code/frameworks/nextjs/src/swc/loader.ts
Converted static getSupportedBrowsers import to async runtime resolution with fallback logic. Added helper function that dynamically imports from next/dist/build/get-supported-browsers.js (v16.2+) or falls back to next/dist/build/utils.js for older versions. Made loader function async to await browser support configuration.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)

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

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@code/frameworks/nextjs/src/swc/loader.ts`:
- Around line 62-73: The try/catch around the dynamic import of
"next/dist/build/get-supported-browsers.js" in loader.ts is too broad and hides
real runtime errors; change the catch to only perform the fallback import when
the failure is a module-resolution error (e.g. error.code ===
'ERR_MODULE_NOT_FOUND' or the Node-specific "Cannot find module" condition), and
re-throw the caught error for any other error; specifically update the block
that calls getSupportedBrowsers (the dynamic import returning
getSupportedBrowsers(projectRoot, isDevelopment)) so it only falls back to
importing "next/dist/build/utils.js" when the error indicates the module is not
found, otherwise throw the error.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4f463ad9-150b-4d4a-9407-ad0945b3688c

📥 Commits

Reviewing files that changed from the base of the PR and between 65e69da and 2951962.

📒 Files selected for processing (1)
  • code/frameworks/nextjs/src/swc/loader.ts

Comment on lines +62 to +73
try {
// @ts-expect-error - Correct import since Next.js v16.2
return (await import('next/dist/build/get-supported-browsers.js')).getSupportedBrowsers(
projectRoot,
isDevelopment
);
} catch (e) {
// TODO: Remove as soon as we don't have to support Next.js < 16.2 anymore
return (await import('next/dist/build/utils.js')).getSupportedBrowsers(
projectRoot,
isDevelopment
);
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 | 🟠 Major

Limit fallback to module-resolution failures only.

At Line 68, the broad catch masks any runtime error from the v16.2 path and silently falls back to legacy code. Re-throw non-resolution errors so real failures are not hidden.

Proposed fix
 async function getSupportedBrowsers(projectRoot: string, isDevelopment: boolean) {
   try {
     // `@ts-expect-error` - Correct import since Next.js v16.2
     return (await import('next/dist/build/get-supported-browsers.js')).getSupportedBrowsers(
       projectRoot,
       isDevelopment
     );
-  } catch (e) {
+  } catch (error: unknown) {
+    const moduleResolutionError =
+      error instanceof Error &&
+      'code' in error &&
+      ((error as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND' ||
+        (error as NodeJS.ErrnoException).code === 'ERR_MODULE_NOT_FOUND') &&
+      error.message.includes('next/dist/build/get-supported-browsers.js');
+
+    if (!moduleResolutionError) {
+      throw error;
+    }
+
     // TODO: Remove as soon as we don't have to support Next.js < 16.2 anymore
     return (await import('next/dist/build/utils.js')).getSupportedBrowsers(
       projectRoot,
       isDevelopment
     );
   }
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
try {
// @ts-expect-error - Correct import since Next.js v16.2
return (await import('next/dist/build/get-supported-browsers.js')).getSupportedBrowsers(
projectRoot,
isDevelopment
);
} catch (e) {
// TODO: Remove as soon as we don't have to support Next.js < 16.2 anymore
return (await import('next/dist/build/utils.js')).getSupportedBrowsers(
projectRoot,
isDevelopment
);
async function getSupportedBrowsers(projectRoot: string, isDevelopment: boolean) {
try {
// `@ts-expect-error` - Correct import since Next.js v16.2
return (await import('next/dist/build/get-supported-browsers.js')).getSupportedBrowsers(
projectRoot,
isDevelopment
);
} catch (error: unknown) {
const moduleResolutionError =
error instanceof Error &&
'code' in error &&
((error as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND' ||
(error as NodeJS.ErrnoException).code === 'ERR_MODULE_NOT_FOUND') &&
error.message.includes('next/dist/build/get-supported-browsers.js');
if (!moduleResolutionError) {
throw error;
}
// TODO: Remove as soon as we don't have to support Next.js < 16.2 anymore
return (await import('next/dist/build/utils.js')).getSupportedBrowsers(
projectRoot,
isDevelopment
);
}
}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@code/frameworks/nextjs/src/swc/loader.ts` around lines 62 - 73, The try/catch
around the dynamic import of "next/dist/build/get-supported-browsers.js" in
loader.ts is too broad and hides real runtime errors; change the catch to only
perform the fallback import when the failure is a module-resolution error (e.g.
error.code === 'ERR_MODULE_NOT_FOUND' or the Node-specific "Cannot find module"
condition), and re-throw the caught error for any other error; specifically
update the block that calls getSupportedBrowsers (the dynamic import returning
getSupportedBrowsers(projectRoot, isDevelopment)) so it only falls back to
importing "next/dist/build/utils.js" when the error indicates the module is not
found, otherwise throw the error.

@valentinpalkovic valentinpalkovic merged commit 552c36a into next Mar 6, 2026
299 of 301 checks passed
@valentinpalkovic valentinpalkovic deleted the valentin/fix-support-for-next-16.2 branch March 6, 2026 15:02
@valentinpalkovic valentinpalkovic added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Mar 6, 2026
yannbf pushed a commit that referenced this pull request Mar 9, 2026
…ext-16.2

Next.js: Add support for v16.2

(cherry picked from commit 552c36a)
@github-actions github-actions Bot added the patch:done Patch/release PRs already cherry-picked to main/release branch label Mar 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug ci:daily Run the CI jobs that normally run in the daily job. patch:done Patch/release PRs already cherry-picked to main/release branch patch:yes Bugfix & documentation PR that need to be picked to main branch

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants