Storybook: "invariant expected app router to be mounted" in stories with useRouter

[gvocale]

In Storybook, when displaying a component using useRouter imported from next/navigation, I am getting the following error.

I understand Storybook 7 should be able to mock Next router out of the box. I have no issue displaying stories importing the old Pages useRouter, but when using the new App useRouter, then this problem arise.

runtime.js:4 Error: invariant expected app router to be mounted
    at useRouter (navigation.js:136:1)
    at NavBack (index.tsx:5:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
    at recoverFromConcurrentError (react-dom.development.js:25850:1)

[giovannivocale-molar]

Found the solution here https://storybook.js.org/blog/integrate-nextjs-and-storybook-automatically/ under next/navigation

Needed to add the following parameter to the stories of components using next/navigation

export const Example = {
  parameters: {
    nextjs: {
      appDirectory: true,
    },
  },
};

[rkrishnasanka]

Where exactly does this need to be placed?

I did it like this, and I don't see any changes:

const meta: Meta<typeof SettingsPage> = {
  title: 'Pages/SettingsPage',
  component: SettingsPage,
  parameters: {
    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
    layout: 'fullscreen',
    nextjs: {
      appDirectory: true,
    },
  },
};

export default meta;
type Story = StoryObj<typeof SettingsPage>;

export const Primary: Story = {};

[JesseKuntz]

I'm seeing the same - no matter where I put:

  parameters: {
    nextjs: {
      appDirectory: true,
    },
  },

Either in the meta or on the individual stories, I still end up with: invariant expected app router to be mounted.

[giovannivocale-molar]

Try upgrading storybook to latest maybe. It is working for me on Storybook 7.4. Documentation is here https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#nextjs-navigation

[Afek-Sakaju]

@giovannivocale-molar Thanks! That worked perfectly 💯

I just added this inside the parameters:

nextjs: {
  appDirectory: true,
},

and it solved the issue.

(using Storybook 8.2.4)