@storybook/nextjs: invariant expected app router to be mounted | Storybook | Page 1

lone beacon Oct 30, 2023, 7:49 AM

#

Hey legends,
We've recently adopted a monorepo approach with Turborepo and all of my happy stories now have errors 😢 The long and the short of it is that the nextjs parameter configuration in storybook seems to not be taken into account anymore when it comes to the router/navigation config. Here's a snippet of a pretty vanilla story config and the subsequent error message:

parameters: {
        nextjs: {
            appDirectory: true,
            navigation: {
                pathname: "/",
            },
        },
    },

Error:

Uncaught Error: invariant expected app router to be mounted
    at useRouter (navigation.js:144:1)
    at useAuth (useAuth.ts:20:1)
    at SignUp (http://localhost:6007/app-(:6007/not-authenticated)-sign-up-index-stories.iframe.bundle.js:1436:73)
    at renderWithHooks (react-dom.development.js:10732:1)
    at mountIndeterminateComponent (react-dom.development.js:15770:1)
    at beginWork$1 (react-dom.development.js:17354:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:19467:1)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:19516:1)
    at invokeGuardedCallback (react-dom.development.js:19591:1)
    at beginWork (react-dom.development.js:25733:1)

As a curiousity, I've tried pulling the whole app out of the monorepo and rerunning installs and storybook on it and it works swimmingly, as it did before, which leads me to the conclusion that my config is fine and that the nextjs storybook framework is fine but it's all very unhappy with being in a monorepo for some reason 🤷‍♂️

Any ideas?

Just to note, I have followed the instructions from turborepo about how to add storybook (nothing crazy here except for the pnpm config) and I'm using the latest version of storybook and the addons (7.5.1)

lone beacon Nov 2, 2023, 2:41 AM

#

Can I give this a bump? I've still got no idea why this would fail in a monorepo and not in a multi-repo

lone beacon Nov 8, 2023, 1:35 AM

#

I'm still battling with this; I can't get the @storybook/next package to work in my monorepo

mint nebula Nov 8, 2023, 2:17 PM

#

@granite galleon is this something you can potentially help with?

granite galleon Nov 8, 2023, 2:50 PM

#

Hi @lone beacon Can you try to put a minimal reproduction together and share it with us? Then I might be able to debug the reason of the failure.

minor agate Nov 20, 2023, 4:25 PM

#

@lone beacon did you find a solution for this, I just upgraded the storybook and @storybook/nextjs packages to 7.5.3 and running into the same issue...

lone beacon Nov 21, 2023, 1:23 AM

#

Hi Tom. No I haven't put any more time into it. The issue was for a not-very-used part of our platform and so I've put it on the backburner till I get some time to circle back to it. I'd be very interested to see what you find in your searches. Are you also using a monorepo?

minor agate Nov 21, 2023, 11:15 AM

#

I haven't been able to pinpoint it, but I think there was a version conflict with some of the babel dependencies. I've upgraded all the storybook dependencies to the latest versions along with upgrading next to the following:

{
    "@storybook/addon-coverage": "1.0.0",
    "@storybook/addon-essentials": "7.5.3",
    "@storybook/addon-interactions": "7.5.3",
    "@storybook/addon-links": "7.5.3",
    "@storybook/blocks": "7.5.3",
    "@storybook/cli": "7.5.3",
    "@storybook/jest": "0.2.3",
    "@storybook/nextjs": "7.5.3",
    "@storybook/react": "7.5.3",
    "@storybook/test-runner": "0.15.1",
    "@storybook/testing-library": "0.2.2",
    "next": "14.0.3"
}

This seems to have done the trick.

#@storybook/nextjs: invariant expected app router to be mounted