JesusTheHun / storybook-addon-remix-react-router

Use your app router in your stories. A decorator made for Remix React Router and Storybook
Apache License 2.0
50 stars 11 forks source link

Remix not working #74

Open nickfujita opened 23 hours ago

nickfujita commented 23 hours ago

Describe the bug Works great with react-router-dom, but not with @remix-run/react. Maybe I'm misunderstanding the scope of this addon, but based on the title it seems that it should support both react-router and remix. I get that they are both made by the same team, but does this not also support Remix?

To Reproduce

import type { Meta, StoryObj } from '@storybook/react';
import { NavLink } from '@remix-run/react';
// import { NavLink } from 'react-router-dom';
import { withRouter } from 'storybook-addon-remix-react-router';

const meta: Meta<typeof NavLink> = {
  component: NavLink,
  decorators: [withRouter],
};
export default meta;

type Story = StoryObj<typeof NavLink>;

export const Main: Story = {
  args: {
    to: '/home',
    children: 'Home',
  },
};

Expected: Renders components using Remix Link, NavLink, useNavigate. Actual: Errors out with,

Unexpected Application Error!
useHref() may be used only in the context of a <Router> component.
Error: useHref() may be used only in the context of a <Router> component.
    at invariant (http://localhost:6006/node_modules/.cache/storybook/bd45b70ddf2f9c95d1ea5d1e495c39b571d64dc099b1becb6c02aa1a45de3ae3/sb-vite/deps/@remix-run_react.js?v=53159940:358:11)
    at useHref (http://localhost:6006/node_modules/.cache/storybook/bd45b70ddf2f9c95d1ea5d1e495c39b571d64dc099b1becb6c02aa1a45de3ae3/sb-vite/deps/@remix-run_react.js?v=53159940:874:34)
    at http://localhost:6006/node_modules/.cache/storybook/bd45b70ddf2f9c95d1ea5d1e495c39b571d64dc099b1becb6c02aa1a45de3ae3/sb-vite/deps/@remix-run_react.js?v=53159940:8332:14
    at renderWithHooks (http://localhost:6006/node_modules/.cache/storybook/bd45b70ddf2f9c95d1ea5d1e495c39b571d64dc099b1becb6c02aa1a45de3ae3/sb-vite/deps/chunk-AGFONM4W.js?v=53159940:12151:26)
    at updateForwardRef (http://localhost:6006/node_modules/.cache/storybook/bd45b70ddf2f9c95d1ea5d1e495c39b571d64dc099b1becb6c02aa1a45de3ae3/sb-vite/deps/chunk-AGFONM4W.js?v=53159940:14307:28)
    at beginWork (http://localhost:6006/node_modules/.cache/storybook/bd45b70ddf2f9c95d1ea5d1e495c39b571d64dc099b1becb6c02aa1a45de3ae3/sb-vite/deps/chunk-AGFONM4W.js?v=53159940:15914:22)
    at beginWork$1 (http://localhost:6006/node_modules/.cache/storybook/bd45b70ddf2f9c95d1ea5d1e495c39b571d64dc099b1becb6c02aa1a45de3ae3/sb-vite/deps/chunk-AGFONM4W.js?v=53159940:19721:22)
    at performUnitOfWork (http://localhost:6006/node_modules/.cache/storybook/bd45b70ddf2f9c95d1ea5d1e495c39b571d64dc099b1becb6c02aa1a45de3ae3/sb-vite/deps/chunk-AGFONM4W.js?v=53159940:19166:20)
    at workLoopSync (http://localhost:6006/node_modules/.cache/storybook/bd45b70ddf2f9c95d1ea5d1e495c39b571d64dc099b1becb6c02aa1a45de3ae3/sb-vite/deps/chunk-AGFONM4W.js?v=53159940:19105:13)
    at renderRootSync (http://localhost:6006/node_modules/.cache/storybook/bd45b70ddf2f9c95d1ea5d1e495c39b571d64dc099b1becb6c02aa1a45de3ae3/sb-vite/deps/chunk-AGFONM4W.js?v=53159940:19084:15)

To help us resolve your issue more quickly, please fork the [https://stackblitz.com/edit/storybook-addon-remix-react-router](stackblitz project) to reproduce your issue.

Added remix.stories.tsx, and used components from @remix-run/react https://stackblitz.com/edit/storybook-addon-remix-react-router-qtd9rs?file=src%2Fstories%2Fremix.stories.tsx

Additional context Add any other context about the problem here.

Environment Share the output of the following command :

npx sb info

Storybook Environment Info:

System: OS: macOS 15.0.1 CPU: (10) arm64 Apple M1 Max Shell: 5.9 - /bin/zsh Binaries: Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm <----- active pnpm: 9.11.0 - ~/.nvm/versions/node/v20.16.0/bin/pnpm Browsers: Chrome: 129.0.6668.101 Safari: 18.0.1

JesusTheHun commented 20 hours ago

I can't reproduce the issue.

I've slightly modified your repository to have both stories files side by side, and they work just fine. Note that I have also removed the lock file to have the latest version of each packages.

Stackblitz repro