[Bug]: Using Storybook with Next@15 RC fails at header mocks #29380
Comments
|
Also trying Next.js 15 RC and get the following when attempting to run Storybook in dev mode. I'm using the following packages: Not a problem, it's an RC after all. |
|
@valentinpalkovic @shilman After spending some more time debugging, I have found the cause of this: if the component consumes any kind of server action that invokes 'use server';
import { headers } from "next/headers";
export const dummyServerAction = async () => {
// NOTE: This is the line that wiill causes Storybook to fail
// If you comment it out and replace with the line below, Storybook will work:
// const referrer = 'http://localhost:6006/';
const referrer = (await headers()).get('referer');
return {
message: 'Server action was successful',
referrer,
}
}I have successfully reproduced the issue with the following repo: |
|
I have found a temporary workaround for this issue. All the
import type { StorybookConfig } from '@storybook/nextjs';
const storybookConfig: StorybookConfig = {
// whatever other storybook config you have
// and then:
webpackFinal: async (config) => {
return {
...config,
resolve: {
...config.resolve,
alias: {
...Object.fromEntries(
Object.entries(config.resolve?.alias || {}).filter(
// we don't want to remove the alias to `next/image`, because storybook aliases that to the mock
([name]) => !(name.startsWith('next') && !name.includes('image')),
),
),
},
},
};
},
};
export default storybookConfig |
|
@jciolek It's working fine, thanks |
|
@jciolek Your workaround worked beautifully 👏 thanks for sharing! |
|
Heads up! We are already working on a proper fix. Shouldn't take too long to get this fixed. |
github-project-automation
bot
moved this from In Progress
to Done
in Core Team Projects
|
Hey everyone! The fix is released in Storybook v8.4.3 as well as Storybook v8.5.0-alpha.4. Please give it a try and provide us feedback <3 |
|
Fix as in Next15 now works with storybook? As this isnt the case for me |
|
The fix rolled out worked for our setup. Thanks @yannbf! @joebentaylor1995 Open a new issue with a reproducible example if possible, since this issue has been closed. |
|
I'm using Storybook v8.4.6 along with NextJS v15.0.2. I stand corrected... after deleting my |
|
@joebentaylor1995 did you try cleaning up your node_modules and lock file? |
Describe the bug
As Next.js RC for v15 has been released for testing, I'm investigating if it is possible to perform an upgrade of a Next.js app containing a storybook from
next@14to[email protected]. When attempting to build a storybook (usingstorybook build), I encounter this error:I suspect this is likely due to the breaking changes made to the folder structure inside
node_modules/next/dist. The release candidate no longer has the nested folder structure the@storybook/nextjsdepends on.This can be reproduced if any component consumed by Storybook invokes a server action in nextjs that uses the dynamic API, e.g.
cookies()orheaders():Reproduction link
https://github.com/terrymun/nextjs15-storybook
Reproduction steps
Running
storybook buildwith next@15 release candidate should not fail with the message:I am unfortunately unable to reproduce this with an example from storybook.new, but I can confirm that inspecting the code in
@storybook/nextjsdoes uncover statements that points to a file fornext@14, but not to a file in[email protected]: https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/src/export-mocks/headers/index.ts#L3C1-L6C53System
Additional context
No response
The text was updated successfully, but these errors were encountered: