Storybook Addon for Remix React Router

Common errors

• Module not found: Can't resolve 'react-router-dom'

  cause Attempting to use `storybook-addon-remix-react-router` v4 or higher while your project or stories still rely on `react-router-dom` imports or usage patterns.
  fix Upgrade your project to use `react-router` directly (and remove `react-router-dom`) or downgrade the addon to version `^3.0.0` if `react-router-dom` usage is required.

• TypeError: Cannot read properties of undefined (reading 'reactRouter')

  cause The `reactRouterParameters` object is either not properly set in `parameters.reactRouter` or `withRouter` decorator is missing.
  fix Ensure that `decorators: [withRouter]` is applied to your component's meta or story, and `parameters.reactRouter` is correctly defined using `reactRouterParameters({...})`.

• TypeError: (0 , storybook_addon_remix_react_router__WEBPACK_IMPORTED_MODULE_2__.reactRouterParameters) is not a function

  cause Incorrect import of `reactRouterParameters` (e.g., attempting a default import or a typo in the named import).
  fix Verify the import statement is `import { reactRouterParameters } from 'storybook-addon-remix-react-router';` (named import with correct casing).

• Error: Storybook encountered an error during loading addons. It might be due to an incompatible addon version or a broken addon.

  cause Mismatch between the addon's major version and your Storybook installation's major version.
  fix Check the addon's README for its compatibility table and install the version that specifically supports your Storybook major version (e.g., `storybook-addon-remix-react-router@^6.0.0` for Storybook 10).

Warnings

• breaking Version 4.0.0 of `storybook-addon-remix-react-router` dropped support for `react-router-dom` imports in favor of `react-router` only, aligning with Remix's deprecation of `react-router-dom` in new projects.
  Fix: If your project still uses `react-router-dom`, you must downgrade to `storybook-addon-remix-react-router@^3.0.0`. For newer projects using `react-router`, ensure all imports and usage conform to `react-router` conventions.
• breaking Major versions of this addon are often tied to specific Storybook versions. v6 supports Storybook 10, v5 supports Storybook 9, v4 supports Storybook 8, and v3 supports Storybook 8. Using a mismatched addon version with your Storybook installation can lead to runtime errors or addon not loading.
  Fix: Always consult the compatibility table in the README and install the addon version that matches your Storybook major version (e.g., `npm i -D storybook-addon-remix-react-router@^6.0.0` for Storybook 10).
• gotcha In version 4.0.1, a bug was fixed regarding an incorrect export path, which could lead to 'Module not found' errors, particularly when configuring the addon.
  Fix: Ensure you are using `storybook-addon-remix-react-router@^4.0.1` or newer to avoid this specific export path issue. Always keep packages updated to their latest patch versions.
• gotcha The `location.path` property in `reactRouterParameters` can be provided as a function. If this function returns a string, it is used 'as is', and it's the developer's responsibility to call `generatePath` from `react-router` if needed.
  Fix: When using `location.path` as a function that returns a string, explicitly use `generatePath` from `react-router` to construct dynamic paths if variables are involved, otherwise, the path may not resolve correctly.

Install

• npm install storybook-addon-remix-react-router npm
• yarn add storybook-addon-remix-react-router yarn
• pnpm add storybook-addon-remix-react-router pnpm

Imports

• withRouter
  wrong:

  const { withRouter } = require('storybook-addon-remix-react-router');

  correct:

  import { withRouter } from 'storybook-addon-remix-react-router';

  Primarily used in ESM contexts like .storybook/preview.ts. The CommonJS require syntax is generally incorrect for Storybook addon configuration.
• reactRouterParameters
  wrong:

  import reactRouterParameters from 'storybook-addon-remix-react-router';

  correct:

  import { reactRouterParameters } from 'storybook-addon-remix-react-router';

  This is a named export. Attempting a default import will result in 'undefined' or a TypeError. Also, ensure correct casing.
• StorybookConfig

  import type { StorybookConfig } from '@storybook/types';

  While not directly from this addon, `StorybookConfig` is essential for type-checking Storybook configuration files where this addon is typically configured. It's an implicit dependency for TypeScript users.

Quickstart

Demonstrates how to configure and use the `withRouter` decorator and `reactRouterParameters` to set up routing context for a `UserProfile` component in Storybook, including path parameters and search parameters for different story states.

import { withRouter, reactRouterParameters } from 'storybook-addon-remix-react-router';
import type { Meta, StoryObj } from '@storybook/react';
import { Outlet, Link } from 'react-router-dom'; // Example component using router hooks

const UserProfile = () => (
  <div>
    <h1>User Profile Page</h1>
    <p>Viewing profile for user ID: <Outlet /></p>
    <nav>
      <Link to="/users/42">Profile</Link> | <Link to="/users/42?tab=activityLog">Activity Log</Link>
    </nav>
  </div>
);

const meta: Meta<typeof UserProfile> = {
  title: 'User Profile',
  component: UserProfile,
  decorators: [withRouter],
  parameters: {
    reactRouter: reactRouterParameters({
      location: {
        pathParams: { userId: '42' },
        searchParams: { tab: 'profile' },
        state: { fromPage: 'homePage' }
      },
      routing: { path: '/users/:userId' },
    }),
  },
};

export default meta;

type Story = StoryObj<typeof UserProfile>;

export const Default: Story = {};

export const ActivityLogTab: Story = {
  parameters: {
    reactRouter: reactRouterParameters({
      location: {
        pathParams: { userId: '42' },
        searchParams: { tab: 'activityLog' }
      },
      routing: { path: '/users/:userId' }
    })
  }
};