[Bug]: Next.js 13 hook useSelectedLayoutSegment breaks Storybook v7.0.0 beta

[kfirfitousi]

Describe the bug

Stories that include components which use the hooks useSelectedLayoutSegment() and useSelectedLayoutSegments() from next/navigation produce the following error:

_react.useContext(...) is null

useSelectedLayoutSegments@http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_defineProperty_js-node_modules_babel_runtime_h-d6e8f5.iframe.bundle.js:453:35
useSelectedLayoutSegment@http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_defineProperty_js-node_modules_babel_runtime_h-d6e8f5.iframe.bundle.js:457:61
Button@http://localhost:6006/Button-stories.iframe.bundle.js:128:104
renderWithHooks@http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-2e4501.iframe.bundle.js:61028:27
mountIndeterminateComponent@http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-2e4501.iframe.bundle.js:64792:13
beginWork@http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-2e4501.iframe.bundle.js:66305:16
beginWork$1@http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-2e4501.iframe.bundle.js:72144:14
performUnitOfWork@http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-2e4501.iframe.bundle.js:71275:12
workLoopSync@http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-2e4501.iframe.bundle.js:71184:22
renderRootSync@http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-2e4501.iframe.bundle.js:71152:7
recoverFromConcurrentError@http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-2e4501.iframe.bundle.js:70568:34
performConcurrentWorkOnRoot@http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-2e4501.iframe.bundle.js:70468:22
workLoop@http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-2e4501.iframe.bundle.js:78880:42
flushWork@http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-2e4501.iframe.bundle.js:78853:14
performWorkUntilDeadline@http://localhost:6006/vendors-node_modules_babel_runtime_helpers_esm_asyncToGenerator_js-node_modules_babel_runtime-2e4501.iframe.bundle.js:79147:21

This error appears for all stories and not just the one using the hook.

To Reproduce

Here is a reproduction repo.

Create a Next.js 13 project:

npx create-next-app@latest --experimental-app 

Add Storybook:

npx storybook@next init

I skipped both migrations (eslintPlugin and mdx1to2), I don't believe they are relevant to this bug.

Add the following lines to the beginning of any component under the stories directory:

'use client';

import { useSelectedLayoutSegment } from 'next/navigation';
// or { useSelectedLayoutSegments }

The 'use client' directive must be applied to use the hook.

Inside the same component, use the hook like so:

 const selectedLayoutSegment = useSelectedLayoutSegment();

Run Storybook:

npm run storybook

None of the stories are rendered, all produce the following error:

_react.useContext(...) is null

Full error details can be seen above

The error still occurs after adding nextjs parameters to each of the Button stories:

export const Primary: Story = {
  parameters: {
    nextjs: {
      appDirectory: true,
    },
  },
  // ..

And also after passing a pathname to navigation in nextjs:

export const Primary: Story = {
  parameters: {
    nextjs: {
      appDirectory: true,
      navigation: {
        pathname: "/profile",
      },
    },
  },
  // ..

System

Environment Info:

  System:
    OS: macOS 12.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Binaries:
    Node: 16.13.1 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.1.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 108.0.1
    Safari: 16.0
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.12 => 7.0.0-beta.12 
    @storybook/addon-interactions: ^7.0.0-beta.12 => 7.0.0-beta.12 
    @storybook/addon-links: ^7.0.0-beta.12 => 7.0.0-beta.12 
    @storybook/blocks: ^7.0.0-beta.12 => 7.0.0-beta.12 
    @storybook/nextjs: ^7.0.0-beta.12 => 7.0.0-beta.12 
    @storybook/react: ^7.0.0-beta.12 => 7.0.0-beta.12 
    @storybook/testing-library: ^0.0.13 => 0.0.13

Additional context

No response

[thanatusdev]

I'm facing the same issue. Is there any workaround for this?

[shilman]

¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.13 containing PR #20330 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.