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

[rhuanbarreto]

As storybook v6.4 brings react-router v6, people using v5 face breaking changes for a minor version update of storybook, which breaks semver.

Temporary solution is changing the version to ~6.3.12 instead of ^6.13.12 in the package.json file and putting "@storybook/router": "~6.3.10", in the resolution parameter of the package.json

And this breaking change is due to the storybook-addon-outline referenced in @storybook/addons-essentials. Follow the yarn why command. This package doesn't follow the fixed version nature of other storybook packages.

=> Found "react-router@6.0.2"
info Has been hoisted to "react-router"
info Reasons this module exists
   - Hoisted from "@storybook#addon-essentials#storybook-addon-outline#@storybook#addons#@storybook#router#react-router"
   - Hoisted from "@storybook#addon-essentials#storybook-addon-outline#@storybook#addons#@storybook#router#react-router-dom#react-router"

[shilman]

@rhuanbarreto why is it a breaking change for storybook to upgrade one of its own dependencies? if your code uses react-router v5, can't it continue to do that alongside storybook?

[rhuanbarreto]

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.

[rhuanbarreto]

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.

[shilman]

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?

[bdefore]

@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.

[bdefore]

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

[vinothvk]

I am also facing this issue.

[rhuanbarreto]

I'm experiencing the same issue as @bdefore but I'm using react router v5 in my project. doing the resolution solved my case for now but many others will also experience the same because of the loose react-router dependency on the storybook-addon-outline package that doesn't lock the version of @storybook/addons and therefore brings the v3.4 with react-router v6

[shilman]

What happens if you switch to @storybook/addon-outline?

[techhysahil]

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.

[bdefore]

@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.

[MhMadHamster]

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.

[shilman]

@MhMadHamster thanks so much for the clarification -- that's really tricky. the wonderful JS ecosystem strikes again! any idea what we can do to mitigate this sticky situation???

[danr-za]

Having the same issue here as well.

[MhMadHamster]

@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.

[rhuanbarreto]

The package addon-essentials removed the need of storybook-addon-outline in 6.4.7 and then the problem is solved. Thanks @shilman!

[shilman]

@rhuanbarreto That's great news! Seems like there's still something funny going on, but I'll wait and see how this issue evolves 🙈

[danr-za]

Hey @rhuanbarreto ,
looks like essentials in 6.4.7 still requires @storybook/addon-outline: 6.4.7

[danr-za]

Additionally to that, I now see that "storybook@addon-essentials@6.3.12" requires "storybook-addon-outline@^1.4.1" which requires:

    "@storybook/addons": ^6.3.0
    "@storybook/api": ^6.3.0
    "@storybook/components": ^6.3.0
    "@storybook/core-events": ^6.3.0

which resolves into 6.4.7

[shilman]

@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 ☝️

[floyd-may]

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?

[rhuanbarreto]

Then I will need to wait until 6.5 gets better stability. For now we need to live with the problem and ignore it in TS.

[f1lander]

We just update our react-router to 6 to avoid this issue but thanks a lot @shilman for all the efforts

[DavidDworetzky]

@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.

[AngeloGiurano]

@shilman I've tried to upgrade to the 6.5.0-alpha.34 but I see the following TS error:

Could not find a declaration file for module 'history'.

Is that expected? Any solution for that?

[shilman]

@AngeloGiurano Not expected, do you have a reproduction you can share? @ndelangen something you can help with?

[ndelangen]

@AngeloGiurano Please share the full logs / CLI output, just the

Could not find a declaration file for module 'history'.

Doesn't give me enough information to trace/fix the issue.

What I think might be happening is that WE removed our dependency on history package. So history isn't declaring any types anymore.

But somewhere you are importing history, this worked before because storybook added typings for history. Now it no longer is, and so you should install types for the history package yourself (if it's used somewhere).

But without a full log, this is speculation..

[AngeloGiurano]

@ndelangen Thanks for your input, I actually had both in my package.json, I had to remove node_modules and re-install and it worked!

Thanks @shilman for the quick fix for this

[Sokolowska-Justyna]

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?

[yotavm]

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

[nirapx]

The same occurs even after upgrading to 6.5.0-beta.1

[shilman]

@nirapx do you have a reproduction you can share?

[nirapx]

@shilman
6.4.22 https://codesandbox.io/s/elegant-butterfly-i68jhp
6.5.0-beta.1 https://codesandbox.io/s/cranky-platform-m4bjy3

[nirapx]

any updates?

[shilman]

@nirapx when I remove the storybook dependencies & node_modules & lockfile and reinstall I get the same errors, so I don't think the problem is Storybook-related

[nirapx]

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