`router is null` - How to lift router provider higher in the component tree?

When running Storybook, I’m getting the error Uncaught TypeError: router is null presumably because I am using useRouter in a provider that’s rendering higher in the tree than RouterContext.Provider

My preview.js looks like this

const AppDecorator = (storyFn) => <RootProviders>{storyFn()}</RootProviders>;

export const decorators = [mswDecorator, AppDecorator];

export const parameters = {
  nextRouter: {
    Provider: RouterContext.Provider,
  },
//.....

Is 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

Storybook tree

[TomFreudenberg]

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

[TomFreudenberg]

@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!