Various errors after migrating to Storybook 7.x and latest React Router

[szimek]

Hi!

We've been using this add-on for a while now with Storybook 6 and a pretty old version of React Router 6, and it worked great. Thanks so much!

I'm now trying to migrate to Storybook 7. It looks like most things work, but when I enable this add-on, I'm getting a bunch of errors and I don't really know what might be causing it.

The order of these errors is always the same:

Warning: Unexpected Fiber popped.
Warning: Unexpected pop.
Warning: Unexpected pop.
Error: Cannot read properties of null (reading 'matches') // this one seems to originate from this add-on
... there's a lot of these
You cannot render a <Router> inside another <Router>. You should never have more than one in your app.
... there's a lot of these

I tried to simplify our Storybook setup - I removed some decorators, other add-ons etc. but whenever I add back withRouter decorator, it breaks in the same way. I'll continue investigating it, as it still might be something with our setup, but maybe someone encountered a similar issue and knows how to solve it. Also, we had an old version of React Router 6 that was not compatible with the latest version of this add-on (it was missing createRoutesFromElements function), so I updated it to the latest version (react-router-dom@6.11.2).

EDIT: I've added some logging to the Proxy setter function in StoryRouteTree and it looks like it's executed ~300 times for a "simple" component (we're using MUI, so there are no simple components ;)). When I open a docs page for the same component it just goes in an infinite (?) loop.

[JesusTheHun]

Hi @szimek, thank you for opening an issue.

It would be nice to have a reproduction repo, so I can add regression tests.

Error: Cannot read properties of null (reading 'matches') I believe it comes from the Proxy, I've updated the code to check for nullishness of undefinedness. We'll see how it goes.

I've added some logging to the Proxy setter function in StoryRouteTree and it looks like it's executed ~300 times for a "simple" component

The setter is called at the same rate as the proxified object. I have added a useMemo to avoid the recreation of the proxy, but it's unclear to me why StoryRouteTree would re-render in the first place.

You cannot render a inside another

This is likely on your side. The decorator creates a router and wraps the story inside it. You should check if any of your decorators already declare a router, or if a decorated component declares a router. EDIT : you should also check if you don't declare the decorator twice, globally and at the story level.

Install storybook-addon-react-router-v6@1.0.1--canary.5017e50.0 to try my modifications

[szimek]

Thanks!

Yeah, I tried making this change to the Proxy locally as well ;)

I don't think I have any additional Router - it all worked fine in Storybook 6 and I removed almost all decorators and even replaced a MUI component with a simple dummy one. I even removed all stories except one.

I have updated react-router, though. I might try to update it without updating Storybook first and see if it breaks in Storybook 6 as well.

[JesusTheHun]

Do you mind making a reproduction repo ?

[szimek]

I'll try tomorrow.

[szymonnowak-st]

@JesusTheHun Thanks for looking into it!

However, I can't replicate it in other browsers. I think it might actually be caused by Mock Service Worked add-on and some config option I have enabled in my Chrome, as it does not happen to others on my team.

I guess it can be closed then.

[JesusTheHun]

Alright, thanks for the update and don't hesitate to reopen the issue if it appears again !