Adding @storybook/react breaks our app's compilation

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.

[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

[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: