How to alter decorator precedence so that the framework decorator wraps the preview.js one?

[brunoreis]

I'm using the nextjs framework. It defines some decorators:

export const decorators = [StyledJsxDecorator, RouterDecorator, HeadManagerDecorator];

In my project's preview.js I also define some decorators:

export const decorators = [withLayout, withUser]

But when my decorators are rendering, the router is not available:

invariant expected app router to be mounted

I imagine that's happening because my decorators are taking precedence over the framework ones. Please, is there a way to make the framework ones take precedence over mine?

[david-keefe]

@brunoreis Did you find a solution to this? I am having the same problem with decorators and Next.js framework.

[brunoreis]

@david-keefe, not yet. Sorry for the late answer, I did not notice the notification about your question here.

[brunoreis]

@david-keefe, have you found one?

[david-keefe]

@brunoreis My issue was because it was in a monorepo and Storybook was not using the same router context as my components were. I basically copied out the decorators and imported the context from the shared location: "my-ui-package/node_modules/next/dist/shared/lib/app-router-context"

[lynndylanhurley]

@david-keefe I think i'm having the same issue. can you please elaborate on your fix?

[david-keefe]

@lynndylanhurley Sorry for the delay. We've updated to the latest version of Storybook and Next.js and the issue was resolved.

Previously, I had copied this file: https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/src/routing/app-router-provider.tsx to make my own decorator and updated all of the next imports to reference the package's installation of Next.js as I mentioned above.