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]: next/navigation#useParams returns null when using @storybook/nextjs #22077

Closed
ryami333 opened this issue Apr 13, 2023 · 1 comment · Fixed by #22946
Closed

[Bug]: next/navigation#useParams returns null when using @storybook/nextjs #22077

ryami333 opened this issue Apr 13, 2023 · 1 comment · Fixed by #22946

Comments

@ryami333
Copy link

ryami333 commented Apr 13, 2023

Describe the bug

When I use useParams in a Storybook story (directly or indirectly), it returns null, even when @storybook/nextjs is installed and .storybook/preview.js#parameters.nextjs.addDirectory is set to true.

This implies that the navigation context has not been correctly configured to include a params object (which should be an empty record {} by default, but presumably should also be configurable).

To Reproduce

Install @storybook/nextjs:

// .storybook/main.js

module.exports = {
  stories: [
    "../src/components/**/*.stories.mdx",
    "../src/components/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
};
// preview.tsx

import type { Preview } from "@storybook/react";

const preview: Preview = {
  parameters: {
    nextjs: {
      appDirectory: true,
      navigation: {
        pathname: "/en/about",
        query: {
          language: "en",
        },
        // Am I missing something here? Perhaps there is a `params` property?
      },
    },
  },
};

export default preview;

Then, write a story which uses next/navigation#useParams:

// Foo.stories.tsx

import { StoryFn, Meta } from "@storybook/react";
import { useParams } from "next/navigation";

export default {
  title: "Foo",
  // … etc
} satisfies Meta;

export const FooStory: StoryFn = () => {
  const params = useParams();
  
  return <h1>Current Language: {params.language}</h1>
}

You get an error like:

Cannot read properties of null (reading 'language')

System

Environment Info:

  System:
    OS: macOS 12.5
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 16.19.0 - /var/folders/m8/hpv4vnnd5x1bmyzvbqs9k55w0000gn/T/fnm_multishells/4769_1681292195929/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.19.3 - /var/folders/m8/hpv4vnnd5x1bmyzvbqs9k55w0000gn/T/fnm_multishells/4769_1681292195929/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Edge: 96.0.1054.43
    Firefox: 107.0.1
    Safari: 15.6
  npmPackages:
    @storybook/addon-actions: ^7.0.4 => 7.0.4 
    @storybook/addon-essentials: ^7.0.4 => 7.0.4 
    @storybook/addon-links: ^7.0.4 => 7.0.4 
    @storybook/nextjs: ^7.0.4 => 7.0.4 
    @storybook/react: ^7.0.4 => 7.0.4 


### Additional context

_No response_
@gitstart-app
Copy link

gitstart-app bot commented Jun 5, 2023

Here is the GitStart Ticket for this issue: https://clients.gitstart.com/storybook-oss/1/tickets/STORYBOOK-22077

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

Successfully merging a pull request may close this issue.

4 participants