Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Cannot access Next router in custom container when using NextJS preset with Docs add-on #28637

Open
karoun opened this issue Jul 17, 2024 · 0 comments

Comments

@karoun
Copy link

karoun commented Jul 17, 2024

Describe the bug

I have a wrapping component that accesses next/router for the purpose of registering some event listeners. When I use it as a decorator on my Stories, everything is fine (the @storybook/nextjs mocks kick in), but since the Docs add-on doesn't support decorators, when I use the same wrapping component in a custom container, I get an error (See Reproduction steps).

Reproduction link

https://stackblitz.com/edit/github-bdxeif-nadeqm

Reproduction steps

  1. Boot the linked StackBlitz environment
  2. Wait for Storybook to finish installing/loading
  3. Observe that the "Configure your project" (and all other Docs) display the following error, but Stories do not

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-docs: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/addon-essentials: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/addon-interactions: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/addon-links: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/addon-onboarding: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/blocks: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/nextjs: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/react: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    @storybook/test: ^8.3.0-alpha.1 => 8.3.0-alpha.1 
    storybook: ^8.3.0-alpha.1 => 8.3.0-alpha.1

Additional context

A path to a possible fix would be for the @storybook/next preset to expose the Providers that it uses for the decorators. These could imported in preview.tsx by consumers of the Docs add-on and passed to a custom container.

Needs nextjs and addon: docs labels.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant