[Bug]: invariant expected app router to be mounted #24722

dfd1123 · 2023-11-06T01:42:03Z

Describe the bug

The component that imports next/navigation and uses useRouter generates an error saying 'Error: invariant expected app router to be mounted'. I am using storybook version 7.5.2 and next14 version. And I also set nextjs: { appDirectory: true } in the parameters.

However, the error does not go away and continues to occur. Did I possibly do something wrong??

To Reproduce

No response

System

No response

Additional context

No response

felixmagnus · 2023-11-06T09:55:15Z

We're also facing this issue using storybook 7.5.2 and next 13.5.6.

We notice this behavior since the peer dependency @babel/core was upgraded from 7.23.0 (working) to 7.23.2 (not working).

Edit: after investigating further, the issue does not seem to be the upgrade of the babel-core version itself, but rather a mismatch between babel-core-versions between different packages, i.e. having one use 7.23.0 and the other using 7.23.2).

After installing 7.23.2 as our own dependency, this issue was resolved (we're using pnpm). --> We can use this as a temporary workaround, but would prefer this being investigated still

whateverneveranywhere · 2023-11-11T14:40:58Z

having this issue with next ^14.0.1. but unlike @felixmagnus, switching to ^7.23.2 for babel/core didn't help me solve the issue.

valentinpalkovic · 2023-11-11T15:14:26Z

Can someone provide a reproduction?

whateverneveranywhere · 2023-11-11T15:44:45Z

Can someone provide a reproduction?

Found the issue, it was on my side, so in my case, while on "next": "^14.0.1",:
after adding appDirectory: true to the parameters, it worked as expected.

const meta = {
	title: 'Auth/Register',
	component: Register,
	decorators: [
		(Story) => (
			<StorybookLayout>
				<Story />
			</StorybookLayout>
		),
	],
	parameters: {
		layout: 'centered',
+              nextjs: {
+                  appDirectory: true,
+              },
	},
	tags: ['autodocs'],
} satisfies Meta<typeof Register>;`

valentinpalkovic · 2023-11-11T15:57:49Z

@dfd1123 Can you remove the render functions and the template? For these simple argument mapping it is not necessary. Storybook does this under the hood. Second, do you have some custom add-ons or decorators in place?

mecaota · 2023-12-11T08:05:00Z

@valentinpalkovic

I'll put a reproduction below.I'm also running into the same issue and it's really bothering me.

https://github.com/mecaota/bugged-nextjs/tree/7122c366fa9bfb465a6b8114875d258b48cb66a0

isBatak · 2024-01-16T14:45:17Z

Is there any workarounds for this issue?

EDIT:
Here is the CodeSandbox reproduction link https://codesandbox.io/p/devbox/storybook-next-usequerystate-issue-wnytw2?file=%2Fsrc%2FButton%2FButton.tsx%3A14%2C42

MiroslavPetrik · 2024-01-23T16:02:47Z

Can someone provide a reproduction?

Found the issue, it was on my side, so in my case, while on "next": "^14.0.1",: after adding appDirectory: true to the parameters, it worked as expected.

const meta = { title: 'Auth/Register', component: Register, decorators: [ (Story) => ( <StorybookLayout> <Story /> </StorybookLayout> ), ], parameters: { layout: 'centered', nextjs: { appDirectory: true, }, }, tags: ['autodocs'], } satisfies Meta<typeof Register>;

I approve this message.

MichaelCasaDev · 2024-01-24T09:21:25Z

Any updates on that? I've also tried using the nextjs: { appDirectory: true, } parameter without any success... I'm using the latest nextjs version (14.1.0) and latest storybook (7.6.10)

MichaelCasaDev · 2024-01-24T15:40:58Z

For everyone having this issue, I've found a workaround using the next-router-mock package!

import { AppRouterContext } from "next/dist/shared/lib/app-router-context.shared-runtime";
import mockRouter from "next-router-mock";

const withRouter: Decorator = (Story, context) => (
  <AppRouterContext.Provider value={mockRouter as any}>
    <Story />
  </AppRouterContext.Provider>
);

isBatak · 2024-01-24T19:24:39Z

@MichaelCasaDev thx for the workaround. Great idea!
I didn't even need the next-router-mock package. Also, next-router-mock only supports pages router, which means that AppRouterInstance is different form mockRouter instance and it feels wrong to pass it to the AppRouterContext,

import {
	AppRouterContext,
	type AppRouterInstance,
} from 'next/dist/shared/lib/app-router-context.shared-runtime';

const meta = {
	decorators: [
		(Story) => (
			<AppRouterContext.Provider value={{} as AppRouterInstance}>
				<Story />
			</AppRouterContext.Provider>
		),
	],
};

valentinpalkovic · 2024-02-01T14:12:11Z

@mecaota Your reproduction does not set up the parameters.nextjs.appDirectory: true. After setting up the parameter correctly, it works. Please follow the documentation here: https://github.com/storybookjs/storybook/blob/main/code/frameworks/nextjs/README.md#nextjs-navigation

This documentation will also be available soon on the official Storybook docs.

valentinpalkovic · 2024-02-01T14:20:16Z

@isBatak Your reproduction doesn't bootstrap. But I can see that you are not setting parameters.nextjs.appDirectory: true. That's the reason why it is not working.

@isBatak, @MichaelCasaDev
The AppRouterContext.Provider doesn't have to be added manually. Storybook does that for you in the case where parameters.nextjs.appDirectory: true is set as documented here: https://github.com/storybookjs/storybook/blob/main/code/frameworks/nextjs/README.md#nextjs-navigation

@MichaelCasaDev You are mentioning that parameters.nextjs.appDirectory: true doesn't help. Please provide a reproduction in that case.

I am closing this issue for now because it seems that the required parameter is not set accordingly. If parameters.nextjs.appDirectory: true is set as documented, and it is still not working; please let me know. In the meantime, I will close this issue because it was about misconfiguration.

isBatak · 2024-02-02T12:53:44Z

@valentinpalkovic please reopen this issue because your suggested solution does not work.

Please read my original issue #25612.
What we need is to be able to use pages folder useRouter together with next/navigation useRouter in the same component.
I can't just enable parameters.nextjs.appDirectory: true because then pages useRouter will not work.

valentinpalkovic · 2024-02-02T13:49:35Z

Can you point me to the Next.js documentation where it explicitly says that next/navigation can be used in the pages directory? When I go to the https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating, it is written to use next/router instead. I don't understand which kind of wild tricks next-usequerystate/nuqs does (importing next/navigation.js instead of next/navigation), but it seems to be a hack rather than something officially supported by Next.js

isBatak · 2024-02-02T16:00:23Z

@valentinpalkovic I can't find any documentation but I can prove that pages folder actually have access to AppRouterContext, check it here https://stackblitz.com/edit/nextjs-3vyr8e?file=app%2Fpage.tsx,pages%2Ftest.tsx

I would say it's there for easier migration form pages to app folder.
If you can mimic that in storybook it would fix the issue.

To clarify:

if parameters.nextjs.appDirectory is not defined or set to false provide both RouterContext and AppRouterContext
if parameters.nextjs.appDirectory is set to true provide just AppRouterContext

I don't see why would this be a problem.

sinashahoveisi · 2024-02-27T08:45:45Z

@MichaelCasaDev thx for the workaround. Great idea! I didn't even need the next-router-mock package. Also, next-router-mock only supports pages router, which means that AppRouterInstance is different form mockRouter instance and it feels wrong to pass it to the AppRouterContext,
import {
	AppRouterContext,
	type AppRouterInstance,
} from 'next/dist/shared/lib/app-router-context.shared-runtime';

const meta = {
	decorators: [
		(Story) => (
			<AppRouterContext.Provider value={{} as AppRouterInstance}>
				<Story />
			</AppRouterContext.Provider>
		),
	],
};

@isBatak
This solution worked for me, thanks for your solution

weiying-chen · 2024-05-01T01:37:29Z

parameters.nextjs.appDirectory set to true didn't fix Error: invariant expected app router to be mounted.

The code of @MichaelCasaDev and @isBatak did:

import {
	AppRouterContext,
	type AppRouterInstance,
} from 'next/dist/shared/lib/app-router-context.shared-runtime';

const meta = {
	decorators: [
		(Story) => (
			<AppRouterContext.Provider value={{} as AppRouterInstance}>
				<Story />
			</AppRouterContext.Provider>
		),
	],
};

alvis · 2024-05-02T08:12:36Z

parameters.nextjs.appDirectory set to true didn't fix Error: invariant expected app router to be mounted.

The code of @MichaelCasaDev and @isBatak did:
import {
	AppRouterContext,
	type AppRouterInstance,
} from 'next/dist/shared/lib/app-router-context.shared-runtime';

const meta = {
	decorators: [
		(Story) => (
			<AppRouterContext.Provider value={{} as AppRouterInstance}>
				<Story />
			</AppRouterContext.Provider>
		),
	],
};

same here, but it worked before. Seems like some version change break the thing under some circumstances

CarlosLeonCode · 2024-09-18T14:44:50Z

@MichaelCasaDev thx for the workaround. Great idea! I didn't even need the next-router-mock package. Also, next-router-mock only supports pages router, which means that AppRouterInstance is different form mockRouter instance and it feels wrong to pass it to the AppRouterContext,
import {
	AppRouterContext,
	type AppRouterInstance,
} from 'next/dist/shared/lib/app-router-context.shared-runtime';

const meta = {
	decorators: [
		(Story) => (
			<AppRouterContext.Provider value={{} as AppRouterInstance}>
				<Story />
			</AppRouterContext.Provider>
		),
	],
};
@isBatak This solution worked for me, thanks for your solution

thnks, that works for me.

dfd1123 added bug needs triage labels Nov 6, 2023

github-project-automation bot added this to Core Team Projects Nov 6, 2023

valentinpalkovic added nextjs needs reproduction labels Nov 11, 2023

shilman added sev:S2 and removed needs reproduction needs triage labels Dec 24, 2023

shilman moved this to Empathy Backlog in Core Team Projects Dec 24, 2023

vanessayuenn added this to the 8.0-beta milestone Jan 9, 2024

vanessayuenn assigned valentinpalkovic Jan 9, 2024

vanessayuenn modified the milestones: 8.0-beta, 8.0-RC Jan 15, 2024

shilman mentioned this issue Jan 16, 2024

[Bug]: next-usequerystate/nuqs "invariant expected app router to be mounted" #25612

Closed

franky47 mentioned this issue Jan 16, 2024

Storybook issue "invariant expected app router to be mounted" 47ng/nuqs#460

Closed

vanessayuenn added this to Storybook 8.0 Roadmap Jan 31, 2024

valentinpalkovic closed this as completed Feb 1, 2024

github-project-automation bot moved this from Empathy Backlog to Done in Core Team Projects Feb 1, 2024

github-project-automation bot moved this to Done in Storybook 8.0 Roadmap Feb 1, 2024

JeongwooHam mentioned this issue Nov 16, 2024

fix: 피드백 페이지 Storybook 오류를 해결하였습니다. mobi-production/ani-fe#31

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: invariant expected app router to be mounted #24722

[Bug]: invariant expected app router to be mounted #24722

dfd1123 commented Nov 6, 2023

felixmagnus commented Nov 6, 2023 •

edited

Loading

whateverneveranywhere commented Nov 11, 2023

valentinpalkovic commented Nov 11, 2023

whateverneveranywhere commented Nov 11, 2023 •

edited by valentinpalkovic

Loading

valentinpalkovic commented Nov 11, 2023

mecaota commented Dec 11, 2023 •

edited

Loading

isBatak commented Jan 16, 2024 •

edited

Loading

MiroslavPetrik commented Jan 23, 2024

MichaelCasaDev commented Jan 24, 2024

MichaelCasaDev commented Jan 24, 2024

isBatak commented Jan 24, 2024

valentinpalkovic commented Feb 1, 2024

valentinpalkovic commented Feb 1, 2024

isBatak commented Feb 2, 2024 •

edited

Loading

valentinpalkovic commented Feb 2, 2024 •

edited

Loading

isBatak commented Feb 2, 2024 •

edited

Loading

sinashahoveisi commented Feb 27, 2024

weiying-chen commented May 1, 2024 •

edited

Loading

alvis commented May 2, 2024

CarlosLeonCode commented Sep 18, 2024

[Bug]: invariant expected app router to be mounted #24722

[Bug]: invariant expected app router to be mounted #24722

Comments

dfd1123 commented Nov 6, 2023

Describe the bug

To Reproduce

System

Additional context

felixmagnus commented Nov 6, 2023 • edited Loading

whateverneveranywhere commented Nov 11, 2023

valentinpalkovic commented Nov 11, 2023

whateverneveranywhere commented Nov 11, 2023 • edited by valentinpalkovic Loading

valentinpalkovic commented Nov 11, 2023

mecaota commented Dec 11, 2023 • edited Loading

isBatak commented Jan 16, 2024 • edited Loading

MiroslavPetrik commented Jan 23, 2024

MichaelCasaDev commented Jan 24, 2024

MichaelCasaDev commented Jan 24, 2024

isBatak commented Jan 24, 2024

valentinpalkovic commented Feb 1, 2024

valentinpalkovic commented Feb 1, 2024

isBatak commented Feb 2, 2024 • edited Loading

valentinpalkovic commented Feb 2, 2024 • edited Loading

isBatak commented Feb 2, 2024 • edited Loading

sinashahoveisi commented Feb 27, 2024

weiying-chen commented May 1, 2024 • edited Loading

alvis commented May 2, 2024

CarlosLeonCode commented Sep 18, 2024

felixmagnus commented Nov 6, 2023 •

edited

Loading

whateverneveranywhere commented Nov 11, 2023 •

edited by valentinpalkovic

Loading

mecaota commented Dec 11, 2023 •

edited

Loading

isBatak commented Jan 16, 2024 •

edited

Loading

isBatak commented Feb 2, 2024 •

edited

Loading

valentinpalkovic commented Feb 2, 2024 •

edited

Loading

isBatak commented Feb 2, 2024 •

edited

Loading

weiying-chen commented May 1, 2024 •

edited

Loading