[Bug] Error with using package (vite4) | Vue

[Ni9ja]

What version of vite are you using?

4.0.1

System info and storybook versions

System: OS: macOS 13.0.1 CPU: (8) arm64 Apple M1 Pro Binaries: Node: 16.11.1 - /usr/local/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 8.0.0 - /usr/local/bin/npm Browsers: Chrome: 108.0.5359.98 Safari: 16.1 npmPackages: @storybook/addon-actions: ^6.5.14 => 6.5.14 @storybook/addon-essentials: ^6.5.14 => 6.5.14 @storybook/addon-interactions: ^6.5.14 => 6.5.14 @storybook/addon-links: ^6.5.14 => 6.5.14 @storybook/builder-vite: ^0.2.5 => 0.2.5 @storybook/testing-library: ^0.0.13 => 0.0.13 @storybook/vue3: ^6.5.14 => 6.5.14

Describe the Bug

npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @storybook/builder-vite@0.2.5 npm ERR! Found: @vitejs/plugin-vue@4.0.0 npm ERR! node_modules/@vitejs/plugin-vue npm ERR! dev @vitejs/plugin-vue@"^4.0.0" from the root project

---

Hello everyone. Is vite4 support planned?

Link to Minimal Reproducible Example

No response

Participation

• [ ] I am willing to submit a pull request for this issue.

[IanVS]

Thanks for the report. I've been working hard to get Vite 4 supported in the upcoming Storybook 7 before the beta announcement this week. I was hoping it would just work in 6.5, but it sounds like it doesn't.

I'll take a look into this as soon as I can though. We definitely want to support vite 4 in storybook 6.5.

[IanVS]

Actually I was just able to add storybook to a vite 4 project. This is what I did.

1. npm create vite, chose vue.
2. npm sb init
3. npm run storybook, loaded up just fine.

Can you give me a set of steps to reproduce the error you are seeing?

[landoephan]

I'm getting the following npm error when running npm install after I updated my package.json to use vite 4:

npm ERR! Could not resolve dependency:
npm ERR! peerOptional @vitejs/plugin-vue@"^3.0.0" from @storybook/builder-vite@0.2.5
npm ERR! node_modules/@storybook/builder-vite
npm ERR!   dev @storybook/builder-vite@"0.2.5" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @vitejs/plugin-vue@3.2.0
npm ERR! node_modules/@vitejs/plugin-vue
npm ERR!   peerOptional @vitejs/plugin-vue@"^3.0.0" from @storybook/builder-vite@0.2.5
npm ERR!   node_modules/@storybook/builder-vite
npm ERR!     dev @storybook/builder-vite@"0.2.5" from the root project

[spacedawwwg]

@landoephan You need to be using @vitejs/plugin-vue@4.0.0

add that as a dependency to your project

[bodograumann]

From what I can see, @storybook/builder-vite has @vitejs/plugin-vue@"^3.0.0 as a peer dependency, which conflicts with the new version @vitejs/plugin-vue@^4.0.0 installed in the user project. Using --legacy-peer-deps gets around this, but I thought we wanted to avoid that going forward?

[landoephan]

@spacedawwwg I am using "@vitejs/plugin-vue": "^4.0.0", thats when the error occurred. @bodograumann is correct as far as I can see. But it would be nice if I can avoid using --legacy-peer-deps

[IanVS]

I'll publish an update to use vite 4 as 0.3.0 when I get a chance. Most of my effort has been spent getting Storybook 7.0 beta polished up.

[Aghassi]

@IanVS would you mind publishing 0.3.0 or pointing to the commit folks can use to get over this issue if it is solved?

[IanVS]

Thanks, I lost track of this, I'll get a new release out soon.