Doesn't work with @remix-run/react": 2.15.0

[steuraa]

Describe the bug After updating to @remix-run/react v2.15.0, we're seeing useHref() may be used only in the context of a <Router> component on every story that contains remix components or hooks (Link, useLocation,...)

To Reproduce Stackblitz with just a remix Link component: stackblitz

Additional context Add any other context about the problem here.

Environment

Storybook Environment Info:

System: OS: Linux 6.8 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish) CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12800H Shell: 5.1.16 - /bin/bash Binaries: Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm <----- active Browsers: Chrome: 131.0.6778.264 npmPackages: @storybook/addon-a11y: 8.5.0 => 8.5.0 @storybook/addon-docs: 8.5.0 => 8.5.0 @storybook/addon-essentials: 8.5.0 => 8.5.0 @storybook/addon-links: 8.5.0 => 8.5.0 @storybook/react: 8.5.0 => 8.5.0 @storybook/react-vite: 8.5.0 => 8.5.0 storybook: 8.5.0 => 8.5.0 storybook-addon-remix-react-router: ^3.0.3 => 3.1.0 storybook-react-i18next: ^3.1.7 => 3.2.1

[JesusTheHun]

What was your previous version of @remix-run/react ? That will help me find the issue

[alejoFernandezSS]

Hey there, I'm having problems with Remix version v2.15.1 as well. We are trying to upgrade from Remix v2.13.0 to v2.15.1 using React Router v7

We weren't using this addon previously but it seems like it may help us in achieving the upgrade. I was getting the same error as @steuraa and when I imported the addon I am now getting the following error:

storybook:dev: [0] ✘ [ERROR] No matching export in "../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-router/dist/index.js" for import "useSearchParams"
storybook:dev: [0] 
storybook:dev: [0]     ../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]._3bnuuikt6ibkofujfodjhht6le/node_modules/storybook-addon-remix-react-router/dist/index.js:1:200:
storybook:dev: [0]       1 │ ...xt,useLocation,useParams,useSearchParams,useNavigationType}from'...
storybook:dev: [0]         ╵                             ~~~~~~~~~~~~~~~
storybook:dev: [0] 

Seems like I'm doing something wrong or it may be a bug from the addon, just adding more context to this issue P.S: We are using Storybook v8.2.9

[JesusTheHun]

@steuraa @alejoFernandezSS AFAICT, @remix-run/react still uses react-router-dom@v6 (see dependencies).

@steuraa since you're still using the v3 of the addon, which imports components from react-router-dom@v6, it should work. Without knowing your previous version, I will be extremely difficult to find the issue and fix it, or open an issue upstream.

@alejoFernandezSS you are using react-router@v7, I'm assuming you are using the v4 of the addon, which uses react-router@v7, so it is not expected to work because @react-remix/run has not made the transition yet.

I feel like this whole transition/merger of remix & react router is a big mess and they have not appreciated the full impact of it, leading to the issues we are facing now.

[alejoFernandezSS]

@steuraa @alejoFernandezSS AFAICT, @remix-run/react still uses react-router-dom@v6 (see dependencies).

@steuraa since you're still using the v3 of the addon, which imports components from react-router-dom@v6, it should work. Without knowing your previous version, I will be extremely difficult to find the issue and fix it, or open an issue upstream.

@alejoFernandezSS you are using react-router@v7, I'm assuming you are using the v4 of the addon, which uses react-router@v7, so it is not expected to work because @react-remix/run has not made the transition yet.

I feel like this whole transition/merger of remix & react router is a big mess and they have not appreciated the full impact of it, leading to the issues we are facing now.

Thanks for the input, you are correct yes, I'm using v4 of the addon. I was kinda confused about this whole thing honestly and you clarifying that @react-remix/run didn't make the transition yet made me understand why it's not working.

So I guess my only option here is to wait for the Remix team to fully transition to react-router@v7. Thanks!