storybook: Storybook v6.4 is breaking users using react-router v5

Do you have a dependency on react-router@5 in your app? you shouldn’t be relying on storybook’s version of react-router in your app, right? or am i misunderstanding?

To clarify: if user wants to use typescript with react-router-dom they will install @types/react-router-dom, which has a dependency on @types/react-router and imports types from @types/react-router, but typescript resolves packages from @types subfolder of node_modules only if it cant find corresponding folder in the ./node_modules/. Now, when user installs any package that has a dependency on react-router, they will get react-router folder in their node_modules and since react-router@6.x now comes with types, you don’t need to install @types/react-router separately. But if you are still using @types/react-router-dom, when resolving types for react-router typescript will find react-router/index.d.ts in root node_modules and use it as a type definition, hence people are getting the error about x not found in TS, because essentially types from react-router@6.x version are being used for @types/react-router-dom@5.x. This is obviously not an issue with storybook, just wanted to clarify why it happens when people updating to latest storybook version.

FYI we’re working on a fix for this, hopefully arriving in the next few days 🤞

@shilman I don’t think there is a “good” solution, but there are a few options (none of them involve changing anything in storybook):

• you can install react-router@5.x just for the sake of keeping root node_modules “clean” from latest version (probably not going to work if you want to flatten your dependencies)
• you can pin react-router version to 5.x, probably not a good idea since there were breaking changes in react-router@6.x so giving a package 5.x when it expects 6.x might produce unpredictable result (bugs/things not working/breaking etc.)
• you can pin version of package that depends on react-router@6.x, that works, but as time goes, more and more packages will update to latest react-router so you will need to pin more and more packages.
• you can set where typescript compiler looks for module via paths option like this:

"paths": {
  "react-router": ["node_modules/@types/react-router"]
}

but, if for whatever reason you will need to compile typescript code from node_modules that expects to get react-router@6.x it will fail, I do not think this is a common thing to desire, so I personally feel like this option is the best

As for storybook, as I said, I don’t think that’s the issue within storybook, so I haven’t really given a thought to how it can be mitigated from storybook side.

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.32 containing PR #17294 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there’s still more to do.

as a side note, a bit disappointed react-router team released 6 a month ago before backward compatibility path is finalized https://github.com/remix-run/react-router/blob/main/docs/upgrading/v5.md

I am also facing this issue, any updates on that?

@shilman i’m also encountering this issue or a similar one. bumping to 6.4 storybook deps cause tsc typecheck errors around react-router. adding "react-router": "^5.1.2" to deps works around it, but i’m wary of adding deps that aren’t explicitly imported in the project. perhaps the issue is for projects that use react-router-dom instead of react-router.

Hi, I just update to the new storybook 6.4.19 I still using React-router-dom 5 in my app and look like its try to use react-router 6 because storybook and my CRA is getting this error

Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')
    at Router (index.tsx:284)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at scheduleUpdateOnFiber (react-dom.development.js:21893)
    at Object.enqueueSetState (react-dom.development.js:12467)
    at PersistGate.push.../../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:365)
    at react.js:61
    at Object.dispatch (redux.js:297)
    at Object.rehydrate (persistStore.js:79)
    at _rehydrate (persistReducer.js:61)
    at persistReducer.js:90

I have found this solution: https://github.com/gvaldambrini/storybook-router/issues/53#issuecomment-962399619

Works like a charm for me

@ml-devninja how is that a solution to the issue? the problem is the dependency being updated in the project, not storybook specific.

All of the proposed solutions are kind of wack… For repos that still use react-router-dom v5 Storybook’s use of v6 causes a lot of compilation errors for that repo due to reasons @MhMadHamster explained. Is the solution to wait for the v5 / v6 backwards compatibility from the React Router team?

aside from manually fixing the version of react-router in package.json are there any other fixes for this currently?

I am also facing this issue.

Is there a way to backport it once 6.5 is still a little distant?

@shilman Are there any plans to fix it? I’m pretty sure a lot of people will not upgrade to version 6 of react-router anytime soon

react-router even recommends not to upgrade the version until they’ll release a backward-compatible version

Thanks.

The thing that I’m not seeing having been addressed above is that @storybook/router added dependencies for react-router and react-router-dom from 6.3.x to 6.4.x. Here’s the situation of transitive dependencies at 6.3.x - at least for me (output from npm ls @storybook/router):

+-- @storybook/addon-essentials@6.3.12
| +-- @storybook/addon-docs@6.3.12
| | `-- @storybook/builder-webpack4@6.3.12
| |   +-- @storybook/router@6.3.12 deduped
| |   `-- @storybook/ui@6.3.12
| |     `-- @storybook/router@6.3.12 deduped
| `-- @storybook/api@6.3.12
|   `-- @storybook/router@6.3.12 deduped
+-- @storybook/addons@6.3.12
| `-- @storybook/router@6.3.12 deduped
`-- @storybook/router@6.3.12

Now with those new deps on react-router and react-router-dom, all these packages transitively depend on them at version 6.x. Clearly @storybook/router is heavily reused within the storybook packages. Other libs have solved this via peerDependencies. Yes, it means that @storybook/router et al would need to support multiple versions of react-router and friends, but it definitely saves us end-users from getting broken on minor upgrades. Is a peerDependencies solution (similar to what’s already being done for react) worth considering here?

@shilman Thanks for the fix! I was running into the react-router-dom typescript issues on 6.4, found this thread and the alpha fix and it seems to work.

@winkerVSbecks can you please update storybook-addon-outline dependencies to ~6.3.0 and publish a new patch release? we didn’t move from storybook-addon-outline until 6.4, so currently all 6.3 users might, under some set of conditions, get 6.4 dependencies pulled in per ☝️

And if I upgrade to 6.4, react-router is upgraded to v6 even though I have react-router-dom: "^5.0.0" in my package.json.

The problem is that even if I use ~ to keep my dependencies on v6.3.x, @storybook-addons-essentials will bump react-router to v6.

for some reason, after upgrading to the stable 6.5 version and removing lockfile, and reinstalling it worked for me. thank you 😃

any updates?

hi. i have upgraded storybook to https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.32 (issue with react-router 6 in other projects) After the upgrade, i have a problem with build-storybook. error: Field ‘browser’ doesn’t contain a valid alias configuration storybook

node_modules/@storybook/theming/dist/cjs doesn’t include any files. Does anyone have a similar issue?

@techhysahil i believe that hook is available in react-router but not react-router-dom. if you’re importing from react-router in your project without declaring as a dependency you’re implicitly reliant on whatever version your dependencies bring in (in this case storybook upped to v6). if you haven’t already try adding it per my comment above.

i am also facing the same problem even though react-router-dom package in my package.json point to 5.xx version. i was using useHistory hook from react-router v-5. But now as the react-router got updated to 6.xx … now it’s does not have above hook support. It purposes a new method but i will have to change it at lot of places to fix my build.

Do you have a dependency on react-router@5 in your app? you shouldn’t be relying on storybook’s version of react-router in your app, right? or am i misunderstanding?