Open abohannon opened 2 years ago
Hello, @abohannon. I'm running the same issue. Any updates on that?
Is there a workaround for this?
Hi, I had this problem but when running Storyshots.
So in my case, instead of adding this package as an addon in .storybook/main.js
:
module.exports = {
...config,
addons: [
...your addons
"storybook-addon-next-router",
],
};
I added the decorator directly to the Component in the story
...
import { WithNextRouter } from 'storybook-addon-next-router/dist/decorators'
...
export default {
title: 'MyComponent',
component: MyComponent,
decorators: [WithNextRouter],
} as ComponentMeta<typeof Sidebar>
In my case I had to inject the WithNextRouter decorator after my AppDecorator.
So I dropped that from main.js
module.exports = {
...config,
addons: [
...your addons
// "storybook-addon-next-router", do not use it here
],
};
and brought it into in preview.js
...
import { RouterContext } from "next/dist/shared/lib/router-context";
import { decorators as RouterDecorators } from 'storybook-addon-next-router/dist/preset/addDecorator';
const withAppProviders = (Story, session, context) => (
<SessionProvider session={session}>
<AppContextProviders>
<LocaleContextProviders>
<ThemeContextProvider>
<Story {...context} />
</ThemeContextProvider>
</LocaleContextProviders>
</AppContextProviders>
</SessionProvider>
);
export const decorators = [withAppProviders, ...RouterDecorators];
...
export const parameters = {
nextRouter: {
locale: i18n.locales[0],
Provider: RouterContext.Provider
},
...
That did the magic on my side
@hisapy
doing like me should help to prevent importing that to ANY story
Hey Aaron @lifeiscontent
maybe you allow ordering / priorisation of presets or put that in documentation?
In any case thanks for your component!
@tmeasday @yannbf
This is a case where the addon's (storybook-addon-next-router
's) decorator is getting inserted too late in the decorator chain.
I think we discussed having some kind of priority for decorators at one point. Do either of you know the current status/thinking on that?
@shilman - We have an internal API for "first/second" pass arg type enhancers, but that's it right now.
We've discussed a bunch of use cases / thoughts around decorator application but it's not clear what the solution should or could be.
@tmeasday @shilman any updates with v7 on the horizon?
@lifeiscontent it's not something we've talked about, no :/
When running Storybook, I'm getting the error
Uncaught TypeError: router is null
presumably because I am usinguseRouter
in a provider that's rendering higher in the tree thanRouterContext.Provider
My
preview.js
looks like thisIs there a way to render the Next router before any other providers? If not, this maybe should be considered a bug because as you'll see from the screenshots below, in a regular build the router is rendered above providers in the tree.
Regular app tree![Screen Shot 2022-03-04 at 9 48 20 PM](https://user-images.githubusercontent.com/889536/156870363-0a60f4d2-dd7f-4a15-8ff3-3a1700516e16.png)
Storybook tree![Screen Shot 2022-03-04 at 8 20 42 PM](https://user-images.githubusercontent.com/889536/156870376-27bac436-23c1-4059-aeaf-46c84e531fa3.png)