#Type conflicts on Vue3 + Vite project after update to Storybook 7.3.2

2 messages · Page 1 of 1 (latest)

undone hamlet
#

Hello, I just upgraded my project from Storybook 7.0.0-beta.54 to 7.3.2, but now I am not able to build my project because of type issues.

My project uses:
vue Vue 3 (setup and composition api)
vite Vite
typescript Typescript

My build command:
vue-tsc --noEmit && vite build

I have attached a screen shot of part of the error message (it mainly repeats the same error for other components)

Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Did you mean 'className'?

2   <div class="h-full overflow-y-auto p-4 md:p-8 lg:p-12 xl:p-16 flex flex-col">`

My main dependencies

"dependencies": {
  ...
  "vue": "^3.2.37",
  ...
},
"devDependencies": {
  ...
  "@storybook/addon-essentials": "^7.3.2",
  "@storybook/addon-interactions": "^7.3.2",
  "@storybook/addon-links": "^7.3.2",
  "@storybook/blocks": "^7.3.2",
  "@storybook/testing-library": "^0.2.0",
  "@storybook/vue3": "^7.3.2",
  "@storybook/vue3-vite": "^7.3.2",
  "@types/dom-screen-wake-lock": "^1.0.0",
  "@types/node": "^18.14.2",
  "@typescript-eslint/eslint-plugin": "^5.54.0",
  "@typescript-eslint/parser": "^5.54.0",
  "@vitejs/plugin-vue": "^4.0.0",
  "@vue/eslint-config-typescript": "^11.0.2",
  "autoprefixer": "^10.4.13",
  "eslint": "^8.35.0",
  "eslint-config-prettier": "^8.6.0",
  "eslint-plugin-prettier": "^4.2.1",
  "eslint-plugin-storybook": "^0.6.13",
  "eslint-plugin-vue": "^9.9.0",
  "postcss": "^8.4.21",
  "prettier": "^2.8.4",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "sass": "^1.58.3",
  "storybook": "^7.3.2",
  "tailwindcss": "^3.2.7",
  "typescript": "^4.9.5",
  "vite": "^4.1.4",
  "vite-plugin-pwa": "^0.14.4",
  "vue-tsc": "^0.37.9"
},
#

I previously had a fix for this issue, but I imagine that with now having dev dependencies to both vue and react, the fix is useless.

I had as a dev dependency:

"@types/react": "file:stub/types__react",
// stub/types__react/index.d.ts

// https://github.com/orgs/mdx-js/discussions/2238
// https://github.com/vuejs/language-tools/discussions/592
// #1078682391272501299 message

// This is a fix for mdx behavior where it adds @types/react to node_modules of vue project
export {};