Remove react from package.json

[upupming]

Issue: vue and react type conflicts

What I did

Remove react from package.json to avoid vue 3 types conflict

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

This solves this problem:

import { Meta } from '@storybook/vue3'

<template>
  <div>
    <h2 class="font-semibold"> 
            |--> type error here: Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'.
  Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>'. Did you mean 'className'?
      Tech stack
    </h2>
  </div>
</template>

the HTMLAttributes from @vue/runtime-dom will be overriten by @types/react.

Currently the solutionn is to disable react types in your tsconfig.json file:

"paths": {
      "@/*": ["src/*"],
      // disable react types as a work around for: https://github.com/storybookjs/storybook/pull/16629
      // https://github.com/Microsoft/TypeScript/issues/17042#issuecomment-327882577
      "react": [".sink.d.ts"]
    },

And create ann empty .sink.d.ts file i your directory.

[nx-cloud]

Nx Cloud Report

We didn't find any information for the current pull request with the commit d480263.
You might need to set the 'NX_BRANCH' environment variable in your CI pipeline.

Check the Nx Cloud Github Integration documentation for more information.

---

Sent with 💌 from NxCloud.

[shilman]

The problem is that @storybook/vue3 actually depends on React since that's what we use to show the UI. This probably won't be the case in 7.0, so we should be able to clean up these dependencies then. @tmeasday WDYT?

[tmeasday]

I'm not sure why the package has to depend directly on react @shilman? But, as you say, I don't think removing it will make a difference as other sub-dependencies do depend on react, such as @storybook/ui.

[upupming]

Now that storybook itself relies on react, I think it should not ship @types/react when in production.

I do a dependency list for @types/react, it seems @storybook/components use @types/react-syntax-highlighter as dependenncy instead of devDependenncy. We can remove @types/react-syntax-highlighter to devDependenncy, what do you thinnk? @shilman

❯ pnpm why @types/react
Legend: production dependency, optional only, dev only

[email protected] /Users/upupming/projects/vue3-compact-template

devDependencies:
@storybook/addon-actions 6.4.0-beta.23
└─┬ @storybook/components 6.4.0-beta.23
  └─┬ @types/react-syntax-highlighter 11.0.5
    └── @types/react 17.0.33
@storybook/addon-essentials 6.4.0-beta.23
├─┬ @storybook/addon-actions 6.4.0-beta.23
│ └─┬ @storybook/components 6.4.0-beta.23
│   └─┬ @types/react-syntax-highlighter 11.0.5
│     └── @types/react 17.0.33
├─┬ @storybook/addon-backgrounds 6.4.0-beta.23
│ └─┬ @storybook/components 6.4.0-beta.23
│   └─┬ @types/react-syntax-highlighter 11.0.5
│     └── @types/react 17.0.33
├─┬ @storybook/addon-controls 6.4.0-beta.23
│ └─┬ @storybook/components 6.4.0-beta.23
│   └─┬ @types/react-syntax-highlighter 11.0.5
│     └── @types/react 17.0.33
├─┬ @storybook/addon-docs 6.4.0-beta.23
│ ├─┬ @storybook/builder-webpack4 6.4.0-beta.23
│ │ ├─┬ @storybook/components 6.4.0-beta.23
│ │ │ └─┬ @types/react-syntax-highlighter 11.0.5
│ │ │   └── @types/react 17.0.33
│ │ └─┬ @storybook/ui 6.4.0-beta.23
│ │   └─┬ @storybook/components 6.4.0-beta.23
│ │     └─┬ @types/react-syntax-highlighter 11.0.5
│ │       └── @types/react 17.0.33
│ ├─┬ @storybook/components 6.4.0-beta.23
│ │ └─┬ @types/react-syntax-highlighter 11.0.5
│ │   └── @types/react 17.0.33
│ ├─┬ @storybook/core 6.4.0-beta.23
│ │ ├─┬ @storybook/core-client 6.4.0-beta.23
│ │ │ └─┬ @storybook/ui 6.4.0-beta.23
│ │ │   └─┬ @storybook/components 6.4.0-beta.23
│ │ │     └─┬ @types/react-syntax-highlighter 11.0.5
│ │ │       └── @types/react 17.0.33
│ │ └─┬ @storybook/core-server 6.4.0-beta.23
│ │   ├─┬ @storybook/builder-webpack4 6.4.0-beta.23
│ │   │ ├─┬ @storybook/components 6.4.0-beta.23
│ │   │ │ └─┬ @types/react-syntax-highlighter 11.0.5
│ │   │ │   └── @types/react 17.0.33
│ │   │ └─┬ @storybook/ui 6.4.0-beta.23
│ │   │   └─┬ @storybook/components 6.4.0-beta.23
│ │   │     └─┬ @types/react-syntax-highlighter 11.0.5
│ │   │       └── @types/react 17.0.33
│ │   ├─┬ @storybook/core-client 6.4.0-beta.23
│ │   │ └─┬ @storybook/ui 6.4.0-beta.23
│ │   │   └─┬ @storybook/components 6.4.0-beta.23
│ │   │     └─┬ @types/react-syntax-highlighter 11.0.5
│ │   │       └── @types/react 17.0.33
│ │   └─┬ @storybook/manager-webpack4 6.4.0-beta.23
│ │     ├─┬ @storybook/core-client 6.4.0-beta.23
│ │     │ └─┬ @storybook/ui 6.4.0-beta.23
│ │     │   └─┬ @storybook/components 6.4.0-beta.23
│ │     │     └─┬ @types/react-syntax-highlighter 11.0.5
│ │     │       └── @types/react 17.0.33
│ │     └─┬ @storybook/ui 6.4.0-beta.23
│ │       └─┬ @storybook/components 6.4.0-beta.23
│ │         └─┬ @types/react-syntax-highlighter 11.0.5
│ │           └── @types/react 17.0.33
│ └─┬ @storybook/vue3 6.4.0-beta.23 peer
│   └─┬ @storybook/core 6.4.0-beta.23
│     ├─┬ @storybook/core-client 6.4.0-beta.23
│     │ └─┬ @storybook/ui 6.4.0-beta.23
│     │   └─┬ @storybook/components 6.4.0-beta.23
│     │     └─┬ @types/react-syntax-highlighter 11.0.5
│     │       └── @types/react 17.0.33
│     └─┬ @storybook/core-server 6.4.0-beta.23
│       ├─┬ @storybook/builder-webpack4 6.4.0-beta.23
│       │ ├─┬ @storybook/components 6.4.0-beta.23
│       │ │ └─┬ @types/react-syntax-highlighter 11.0.5
│       │ │   └── @types/react 17.0.33
│       │ └─┬ @storybook/ui 6.4.0-beta.23
│       │   └─┬ @storybook/components 6.4.0-beta.23
│       │     └─┬ @types/react-syntax-highlighter 11.0.5
│       │       └── @types/react 17.0.33
│       ├─┬ @storybook/core-client 6.4.0-beta.23
│       │ └─┬ @storybook/ui 6.4.0-beta.23
│       │   └─┬ @storybook/components 6.4.0-beta.23
│       │     └─┬ @types/react-syntax-highlighter 11.0.5
│       │       └── @types/react 17.0.33
│       └─┬ @storybook/manager-webpack4 6.4.0-beta.23
│         ├─┬ @storybook/core-client 6.4.0-beta.23
│         │ └─┬ @storybook/ui 6.4.0-beta.23
│         │   └─┬ @storybook/components 6.4.0-beta.23
│         │     └─┬ @types/react-syntax-highlighter 11.0.5
│         │       └── @types/react 17.0.33
│         └─┬ @storybook/ui 6.4.0-beta.23
│           └─┬ @storybook/components 6.4.0-beta.23
│             └─┬ @types/react-syntax-highlighter 11.0.5
│               └── @types/react 17.0.33
├─┬ @storybook/addon-measure 6.4.0-beta.23
│ └─┬ @storybook/components 6.4.0-beta.23
│   └─┬ @types/react-syntax-highlighter 11.0.5
│     └── @types/react 17.0.33
├─┬ @storybook/addon-outline 6.4.0-beta.23
│ └─┬ @storybook/components 6.4.0-beta.23
│   └─┬ @types/react-syntax-highlighter 11.0.5
│     └── @types/react 17.0.33
├─┬ @storybook/addon-toolbars 6.4.0-beta.23
│ └─┬ @storybook/components 6.4.0-beta.23
│   └─┬ @types/react-syntax-highlighter 11.0.5
│     └── @types/react 17.0.33
└─┬ @storybook/addon-viewport 6.4.0-beta.23
  └─┬ @storybook/components 6.4.0-beta.23
    └─┬ @types/react-syntax-highlighter 11.0.5
      └── @types/react 17.0.33
@storybook/vue3 6.4.0-beta.23
└─┬ @storybook/core 6.4.0-beta.23
  ├─┬ @storybook/core-client 6.4.0-beta.23
  │ └─┬ @storybook/ui 6.4.0-beta.23
  │   └─┬ @storybook/components 6.4.0-beta.23
  │     └─┬ @types/react-syntax-highlighter 11.0.5
  │       └── @types/react 17.0.33
  └─┬ @storybook/core-server 6.4.0-beta.23
    ├─┬ @storybook/builder-webpack4 6.4.0-beta.23
    │ ├─┬ @storybook/components 6.4.0-beta.23
    │ │ └─┬ @types/react-syntax-highlighter 11.0.5
    │ │   └── @types/react 17.0.33
    │ └─┬ @storybook/ui 6.4.0-beta.23
    │   └─┬ @storybook/components 6.4.0-beta.23
    │     └─┬ @types/react-syntax-highlighter 11.0.5
    │       └── @types/react 17.0.33
    ├─┬ @storybook/core-client 6.4.0-beta.23
    │ └─┬ @storybook/ui 6.4.0-beta.23
    │   └─┬ @storybook/components 6.4.0-beta.23
    │     └─┬ @types/react-syntax-highlighter 11.0.5
    │       └── @types/react 17.0.33
    └─┬ @storybook/manager-webpack4 6.4.0-beta.23
      ├─┬ @storybook/core-client 6.4.0-beta.23
      │ └─┬ @storybook/ui 6.4.0-beta.23
      │   └─┬ @storybook/components 6.4.0-beta.23
      │     └─┬ @types/react-syntax-highlighter 11.0.5
      │       └── @types/react 17.0.33
      └─┬ @storybook/ui 6.4.0-beta.23
        └─┬ @storybook/components 6.4.0-beta.23
          └─┬ @types/react-syntax-highlighter 11.0.5
            └── @types/react 17.0.33

Update: I have opened another PR to fix this: #16630