Storybook: Adding @storybook/react breaks our app's compilation

[kg-currenxie]

Describe the bug
Just doing yarn add @storybook/react -D breaks our app's compilation (TypeScript). That's the only step. I'm not even trying to run Storybook yet.

To Reproduce
Very hard to reproduce. We have a somewhat big TypeScript app, tons of packages and configurations.

Code snippets

1. package.json: https://gist.github.com/kg-currenxie/1aa3c2c0829b0a787bd97c95011a7c9d

  "devDependencies": {
+    "@storybook/react": "^5.1.8",

1. Full yarn.lock diff file. This is probably the error? It might mess with all of our babel versions?
   http://www.mergely.com/Sy0nNgsH/

2. webpack config
   https://gist.github.com/kg-currenxie/e7edb5f1352ef9d6c6ce76d33008cdb6

3. tsconfig
   https://gist.github.com/kg-currenxie/62cc2389c23748253e3baf5087c82706

System:

• "@babel/core": "7.4.5"
• "@storybook/react": "^5.1.8"
• "typescript": "3.2.1"
• "webpack": "4.32.2"
• "react": "^16.8.6"

Additional context
The compilation error it self is some crazy type errors (in multiple places in our app).

Things like this. Worked fine before we did yarn add @storybook/react -D 🤷‍♂

Type '{ children: (count: number) => Element; ids: any; }' is not assignable to type '(IntrinsicAttributes & IntrinsicClassAttributes<Component<(Pick<{}, never> & IStatusContainerOwnProps) | (Pick<Pick<{}, never> & IStatusContainerOwnProps, "children" | "component" | "ids" | "hideZero"> & Pick<...>) | (Pick<...> & ... 1 more ... & Partial<...>) | (Pick<...> & ... 1 more ... & Partial<...>), any, any>...'.
  Type '{ children: (count: number) => Element; ids: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<(Pick<{}, never> & IStatusContainerOwnProps) | (Pick<Pick<{}, never> & IStatusContainerOwnProps, "children" | "component" | "ids" | "hideZero"> & Pick<...>) | (Pick<...> & ... 1 more ... & Partial<...>) | (Pick<...> & ... 1 more ... & Partial<...>), any, any>>...'.
    Property 'hideZero' is missing in type '{ children: (count: number) => Element; ids: any; }' but required in type 'Readonly<Pick<Pick<{}, never> & IStatusContainerOwnProps, "children" | "component" | "ids" | "hideZero"> & Partial<Pick<Pick<{}, never> & IStatusContainerOwnProps, never>> & Partial<...>>'.  TS2322

Hint: In _this_ case, hideZero is defined as static defaultProps..., but suddenly isn't working. But default props should work since typescript 3.0.

Although, we have other errors not related to defaultProps.

[ndelangen]

Have you tried removing the lockfile and node_modules and re-installing?

[kg-currenxie]

Yes, same result. The yarn.lock diff is massive.

[ndelangen]

I noticed that in your package.json you have fixed version for babel & some loaders, if you make those ^ versions, does that make a difference?

[kg-currenxie]

babel core was already on the latest,
babel-loader got upgraded from 8.0.5 to 8.0.6

dont think the other loaders matter in this case? css/style/eslint-loader, but i upgraded them as well

no changes :(

[kg-currenxie]

Hey, false alarm. I got the same error by just deleting our yarn.lock and installing again. So it wasn't specific to Storybook, but adding the package made the same side effect.

I still don't understand why :P We had most package versions locked, so not sure how yarn.lock could have different versions.

[ndelangen]

@kg-currenxie long story short:

You depend on exact version package-a,
package-a depends on inexact package-b

a lockfile makes sure that dependency on package-b gets locked to an exact version.

[ythecombinator]

@kg-currenxie did you manage to figure it out?

This thing is puzzling me for hours and this issue is the closest thing I could find.

The only difference is I don't get the same error by just deleting the yarn.lock and installing again – actually, I can install almost any dependency I can think of; only storybook itself and its addons break the build.

For reference, by simply adding any of the listed below I get the whole thing crashed:

[kg-currenxie]

Our case ended up not being related to storybook even if it seemed so.
Without even having storybook added, we tried deleting our yarn.lock, and after installing again we got the same error. We had to solve/upgrade a lot of dependencies.

[ythecombinator]

So... Upgrading things did the trick?

[kg-currenxie]

In our case yes :) Unfortunately I don't remember specifically which packages caused it all.

[ythecombinator]

@kg-currenxie, I spent a few hours updating dependency by dependency and, apparently, updating react and react-dom did the thing – but I am not quite sure yet. So:

1. Thanks for your priceless tip (I probably would have taken a few more hours to guess that)
2. WTF! This works but still puzzles me in a way I cannot even say

[kg-currenxie]

Awesome! :)
Maybe the repo owners would know more? (And add something to the docs)