Skip to content

Revert "Next.js: Remove next/config usage in Next.js >=v16 projects" #32576

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

Closed
wants to merge 1 commit into from
Closed

Revert "Next.js: Remove next/config usage in Next.js >=v16 projects" #32576

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
5 changes: 0 additions & 5 deletions code/frameworks/nextjs-vite/build-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,6 @@ const config: BuildEntries = {
exportEntries: ['./preview'],
entryPoint: './src/preview.tsx',
},
{
exportEntries: ['./config/preview'],
entryPoint: './src/config/preview.ts',
dts: false,
},
{
exportEntries: ['./cache.mock'],
entryPoint: './src/export-mocks/cache/index.ts',
Expand Down
2 changes: 0 additions & 2 deletions code/frameworks/nextjs-vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@
"types": "./dist/export-mocks/cache/index.d.ts",
"default": "./dist/export-mocks/cache/index.js"
},
"./config/preview": "./dist/config/preview.js",
"./headers.mock": {
"types": "./dist/export-mocks/headers/index.d.ts",
"default": "./dist/export-mocks/headers/index.js"
Expand Down Expand Up @@ -89,7 +88,6 @@
"@types/node": "^22.0.0",
"next": "^15.2.3",
"postcss-load-config": "^6.0.1",
"semver": "^7.3.5",
"typescript": "^5.8.3"
},
"peerDependencies": {
Expand Down
18 changes: 2 additions & 16 deletions code/frameworks/nextjs-vite/src/preset.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,8 @@ import type { StorybookConfigVite } from '@storybook/builder-vite';
import { viteFinal as reactViteFinal } from '@storybook/react-vite/preset';

import postCssLoadConfig from 'postcss-load-config';
import semver from 'semver';

import type { FrameworkOptions } from './types';
import { getNextjsVersion } from './utils';

const require = createRequire(import.meta.url);

Expand All @@ -37,20 +35,8 @@ export const core: PresetProperty<'core'> = async (config, options) => {
};

export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => {
const annotations = [
...entry,
fileURLToPath(import.meta.resolve('@storybook/nextjs-vite/preview')),
];

const nextjsVersion = getNextjsVersion();
const isNext16orNewer = semver.gte(nextjsVersion, '16.0.0');

// TODO: Remove this once we only support Next.js v16 and above
if (!isNext16orNewer) {
annotations.push(fileURLToPath(import.meta.resolve('@storybook/nextjs-vite/config/preview')));
}

return annotations;
const result = [...entry, fileURLToPath(import.meta.resolve('@storybook/nextjs-vite/preview'))];
return result;
Comment on lines +38 to +39
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 29, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

Revert missed: preview entry now resolves to a non-existent export

The revert restores the ./config/preview export and removes the ./preview entry that #32547 introduced. Keeping fileURLToPath(import.meta.resolve('@storybook/nextjs-vite/preview')) means this will resolve to a module that no longer exists and Storybook will crash with ERR_MODULE_NOT_FOUND as soon as preview annotations are computed. Please switch this back to the @storybook/nextjs-vite/config/preview path (and reapply the old version-gating logic if needed) so the revert actually works.

🤖 Prompt for AI Agents 
In code/frameworks/nextjs-vite/src/preset.ts around lines 38-39, the preview
entry currently resolves '@storybook/nextjs-vite/preview' which no longer
exists; revert this to the original '@storybook/nextjs-vite/config/preview' (and
if the prior version-gating check existed, reapply it) so Storybook loads the
restored ./config/preview export instead of a non-existent ./preview module;
update the resolved path accordingly and ensure any conditional logic that
selected between legacy and new preview paths is restored.

};

export const optimizeViteDeps = [
Expand Down
3 changes: 2 additions & 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 @@ -2,7 +2,7 @@ import type * as React from 'react';

import type { Addon_DecoratorFunction, LoaderFunction } from 'storybook/internal/types';

import type { ReactRenderer } from '@storybook/react';
import type { ReactRenderer, StoryFn } from '@storybook/react';
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 29, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

Remove the unused StoryFn import

StoryFn isn’t referenced anywhere in this file, so the TS/ESLint “no-unused-locals” rule will fail the build. Please drop it from the import list (or wire it back into the typing if that was the intention).

-import type { ReactRenderer, StoryFn } from '@storybook/react';
+import type { ReactRenderer } from '@storybook/react';
📝 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
import type { ReactRenderer, StoryFn } from '@storybook/react';
// Drop the unused `StoryFn` import
import type { ReactRenderer } from '@storybook/react';
import './config/preview';
🤖 Prompt for AI Agents 
In code/frameworks/nextjs-vite/src/preview.tsx around line 5, the imported
symbol StoryFn is not used which will trigger the no-unused-locals rule; remove
StoryFn from the import list (i.e. import only ReactRenderer) or, if you
intended to use it, add the appropriate type annotation where StoryFn is needed
so the import is referenced.


// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore we must ignore types here as during compilation they are not generated yet
Expand All @@ -13,6 +13,7 @@ import { createRouter } from '@storybook/nextjs-vite/router.mock';

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

import './config/preview';
import { HeadManagerDecorator } from './head-manager/decorator';
import { ImageDecorator } from './images/decorator';
import { RouterDecorator } from './routing/decorator';
Expand Down
7 changes: 0 additions & 7 deletions code/frameworks/nextjs-vite/src/utils.ts
View file
Open in desktop

This file was deleted.

5 changes: 0 additions & 5 deletions code/frameworks/nextjs/build-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,6 @@ const config: BuildEntries = {
exportEntries: ['./preview'],
entryPoint: './src/preview.tsx',
},
{
exportEntries: ['./config/preview'],
entryPoint: './src/config/preview.ts',
dts: false,
},
{
exportEntries: ['./cache.mock'],
entryPoint: './src/export-mocks/cache/index.ts',
Expand Down
1 change: 0 additions & 1 deletion code/frameworks/nextjs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@
"default": "./dist/export-mocks/cache/index.js"
},
"./compatibility/draft-mode.compat": "./dist/compatibility/draft-mode.compat.js",
"./config/preview": "./dist/config/preview.js",
"./export-mocks": "./dist/export-mocks/index.js",
"./headers.mock": {
"types": "./dist/export-mocks/headers/index.d.ts",
Expand Down
22 changes: 6 additions & 16 deletions code/frameworks/nextjs/src/config/webpack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
import { fileURLToPath } from 'node:url';

import type { NextConfig } from 'next';
import semver from 'semver';
import type { Configuration as WebpackConfig } from 'webpack';

import { addScopedAlias, getNextjsVersion, resolveNextConfig } from '../utils';

const nextjsVersion = getNextjsVersion();
const isNext16orNewer = semver.gte(nextjsVersion, '16.0.0');
import { addScopedAlias, resolveNextConfig } from '../utils';

const tryResolve = (path: string) => {
try {
Expand All @@ -26,10 +22,7 @@ export const configureConfig = async ({
}): Promise<NextConfig> => {
const nextConfig = await resolveNextConfig({ nextConfigPath });

// TODO: Remove this once we only support Next.js 16 and above
if (!isNext16orNewer) {
addScopedAlias(baseConfig, 'next/config');
}
addScopedAlias(baseConfig, 'next/config');

// @ts-expect-error We know that alias is an object
if (baseConfig.resolve?.alias?.['react-dom']) {
Expand Down Expand Up @@ -65,17 +58,14 @@ const setupRuntimeConfig = async (
baseConfig: WebpackConfig,
nextConfig: NextConfig
): Promise<void> => {
const definePluginConfig: Record<string, any> = {};

// TODO: Remove this once we only support Next.js 16 and above
if (!isNext16orNewer) {
const definePluginConfig: Record<string, any> = {
// this mimics what nextjs does client side
// https://github.com/vercel/next.js/blob/57702cb2a9a9dba4b552e0007c16449cf36cfb44/packages/next/client/index.tsx#L101
definePluginConfig['process.env.__NEXT_RUNTIME_CONFIG'] = JSON.stringify({
'process.env.__NEXT_RUNTIME_CONFIG': JSON.stringify({
serverRuntimeConfig: {},
publicRuntimeConfig: nextConfig.publicRuntimeConfig,
});
}
}),
};

const newNextLinkBehavior = (nextConfig.experimental as any)?.newNextLinkBehavior;

Expand Down
14 changes: 2 additions & 12 deletions code/frameworks/nextjs/src/preset.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import nextBabelPreset from './babel/preset';
import { configureConfig } from './config/webpack';
import TransformFontImports from './font/babel';
import type { FrameworkOptions, StorybookConfig } from './types';
import { getNextjsVersion } from './utils';

export const addons: PresetProperty<'addons'> = [
fileURLToPath(import.meta.resolve('@storybook/preset-react-webpack')),
Expand Down Expand Up @@ -49,17 +48,8 @@ export const core: PresetProperty<'core'> = async (config, options) => {
};

export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => {
const annotations = [...entry, fileURLToPath(import.meta.resolve('@storybook/nextjs/preview'))];

const nextjsVersion = getNextjsVersion();
const isNext16orNewer = semver.gte(nextjsVersion, '16.0.0');

// TODO: Remove this once we only support Next.js v16 and above
if (!isNext16orNewer) {
annotations.push(fileURLToPath(import.meta.resolve('@storybook/nextjs/config/preview')));
}

return annotations;
const result = [...entry, fileURLToPath(import.meta.resolve('@storybook/nextjs/preview'))];
return result;
};

export const babel: PresetProperty<'babel'> = async (baseConfig: TransformOptions) => {
Expand Down
1 change: 1 addition & 0 deletions code/frameworks/nextjs/src/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { createRouter } from '@storybook/nextjs/router.mock';

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

import './config/preview';
import { HeadManagerDecorator } from './head-manager/decorator';
import { ImageDecorator } from './images/decorator';
import { RouterDecorator } from './routing/decorator';
Expand Down
1 change: 0 additions & 1 deletion code/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6566,7 +6566,6 @@ __metadata:
"@types/node": "npm:^22.0.0"
next: "npm:^15.2.3"
postcss-load-config: "npm:^6.0.1"
semver: "npm:^7.3.5"
styled-jsx: "npm:5.1.6"
typescript: "npm:^5.8.3"
vite-plugin-storybook-nextjs: "npm:^2.0.7"
Expand Down
Loading