#Next.js 13 useParams() not working in Storybook

2 messages · Page 1 of 1 (latest)

nimble delta
#

I'm getting the following error: "Cannot read properties of null (reading 'locale')".

Am I doing it wrong?
My component depends on the params.locale value, and therefore I need to use it. But the story file is not working and I get the error you see above.

My story file looks like this:

import { useParams, usePathname } from 'next/navigation';
import NavigationLink from './NavigationLink';
import { mockNavigationLinkProps } from './NavigationLink.mocks';

const meta: Meta<typeof NavigationLink> = {
  title: 'Components/NavigationLink',
  component: NavigationLink,
  tags: ['autodocs'],
  parameters: {
    layout: 'fullscreen',
    nextjs: {
      appDirectory: true,
      navigation: {
        pathname: '/sv/',
        query: {
          locale: 'sv',
        },
      },
    },
  },
  decorators: [
    (Story) => {
      const pathname = usePathname();
      const params = useParams();

      return (
        <div>
          <h1>Current Locale: {params.locale}</h1>
          <Story />
        </div>
      );
    },
  ],
};

export default meta;
type Story = StoryObj<typeof NavigationLink>;

export const Base: Story = {
  args: {
    ...mockNavigationLinkProps.base,
  },
};
sudden orchid