[Docs] Clarify vite peer dependency requirements in README

[fwouts]

What version of vite are you using?

2.9.14

System info and storybook versions

System:
OS: macOS 12.3.1
CPU: (8) arm64 Apple M1
Binaries:
Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 8.9.0 - ~/.config/yarn/global/node_modules/.bin/npm
Browsers:
Chrome: 103.0.5060.114
Firefox: 101.0.1
Safari: 15.4
npmPackages:
@storybook/addon-actions: ^6.5.9 => 6.5.9
@storybook/addon-essentials: ^6.5.9 => 6.5.9
@storybook/addon-links: ^6.5.9 => 6.5.9
@storybook/addon-postcss: ^2.0.0 => 2.0.0
@storybook/builder-vite: ^0.2.0-beta.1 => 0.2.0-beta.1
@storybook/react: ^6.5.9 => 6.5.9

Describe the Bug

See fwouts/hungry#9 for easy repro (just checkout the branch and run yarn storybook).

$ yarn storybook
yarn run v1.22.19
$ start-storybook -p 6006
info @storybook/react v6.5.9
info
info => Loading presets
ERR! TypeError: vite.createFilter is not a function
ERR!     at viteReact (/Users/fwouts/dev/hungry/node_modules/@vitejs/plugin-react/dist/index.cjs:189:21)
ERR!     at pluginConfig (/Users/fwouts/dev/hungry/node_modules/@storybook/builder-vite/dist/vite-config.js:81:36)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at async commonConfig (/Users/fwouts/dev/hungry/node_modules/@storybook/builder-vite/dist/vite-config.js:65:18)
ERR!     at async createViteServer (/Users/fwouts/dev/hungry/node_modules/@storybook/builder-vite/dist/vite-server.js:10:24)
ERR!     at async Object.start (/Users/fwouts/dev/hungry/node_modules/@storybook/builder-vite/dist/index.js:53:20)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/fwouts/dev/hungry/node_modules/@storybook/core-server/dist/cjs/dev-server.js:207:28)
ERR!     at async buildDevStandalone (/Users/fwouts/dev/hungry/node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR!     at async buildDev (/Users/fwouts/dev/hungry/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)
ERR!  TypeError: vite.createFilter is not a function
ERR!     at viteReact (/Users/fwouts/dev/hungry/node_modules/@vitejs/plugin-react/dist/index.cjs:189:21)
ERR!     at pluginConfig (/Users/fwouts/dev/hungry/node_modules/@storybook/builder-vite/dist/vite-config.js:81:36)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at async commonConfig (/Users/fwouts/dev/hungry/node_modules/@storybook/builder-vite/dist/vite-config.js:65:18)
ERR!     at async createViteServer (/Users/fwouts/dev/hungry/node_modules/@storybook/builder-vite/dist/vite-server.js:10:24)
ERR!     at async Object.start (/Users/fwouts/dev/hungry/node_modules/@storybook/builder-vite/dist/index.js:53:20)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/fwouts/dev/hungry/node_modules/@storybook/core-server/dist/cjs/dev-server.js:207:28)
ERR!     at async buildDevStandalone (/Users/fwouts/dev/hungry/node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR!     at async buildDev (/Users/fwouts/dev/hungry/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

This particular crash disappears if I also install the latest Vite 3 beta.

Suggested solution: Should Vite 3 be an explicit dependency of vite-builder?

Link to Minimal Reproducible Example

https://github.com/fwouts/hungry/tree/vite-builder-0.2

Participation

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

[fwouts]

I see from #433 that this is expected.

It's perhaps worth pointing out that when you run yarn add @storybook/vite-builder, the 0.2.0-beta.1 version automatically gets picked over 0.1.0, I suspect because they all have a major version of zero? Maybe this can be fixed by updating the README to specify a particular version for now :)

[IanVS]

Doh, turns out I didn't publish it correctly, and 0.2.0-beta.1 is being treated as latest. I'll try to figure out a way to resolve that... Thanks for reporting it.

[IanVS]

Ok, I've fixed the latest tag to point back to 0.1.39. And yeah, vite is a peer dependency, since it's expected that you should be using vite already for your app, and we want to just use whatever version you have (as long as we can support it). I'll make an update to the readme to make it clear which versions of vite are supported by which versions of this package. Apologies for the confusion.

[IanVS]

I'll leave this open until I update the readme.

[fwouts]

Ok, I've fixed the latest tag to point back to 0.1.39. And yeah, vite is a peer dependency, since it's expected that you should be using vite already for your app, and we want to just use whatever version you have (as long as we can support it). I'll make an update to the readme to make it clear which versions of vite are supported by which versions of this package. Apologies for the confusion.

Thank you! And no worries at all.

FWIW I can think of a few cases where you'd want to use Vite for Storybook but not for your app:

• Next.js app (see the linked example)
• large, legacy Webpack-based app that requires careful testing before migrating to Vite (but Storybook is fine because it's internal facing)

[IanVS]

Interesting. I was under the (perhaps flawed) impression that next.js apps are so intricately tied to webpack that there's no good way to use vite with them. And, I'm not sure I'd recommend mixing build tools between the app and storybook, since one of the goals of most storybooks is to represent the components of the app as accurately as possible. If they're being built with two different tools, there could be subtle differences, making testing and QA with storybook less reliable.

And, the way things are now with vite being a peer dependency, it's still technically possible to do what you are talking about, you just have to know that you've got to install vite, which deserves some mention in our docs.

[AskAlice]

I'm getting some interesting behavior here

❯ yarn add -D @storybook/builder-vite
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "workspace-aggregator-32c887be-73ce-46ec-9560-b972bcf57f31 > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-jsx-a11y@^6.5.1".
warning "workspace-aggregator-32c887be-73ce-46ec-9560-b972bcf57f31 > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-react@^7.28.0".
warning "workspace-aggregator-32c887be-73ce-46ec-9560-b972bcf57f31 > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-react-hooks@^4.3.0".
warning "workspace-aggregator-32c887be-73ce-46ec-9560-b972bcf57f31 > ts-node@10.8.2" has unmet peer dependency "@types/node@*".
warning "workspace-aggregator-32c887be-73ce-46ec-9560-b972bcf57f31 > vite > @storybook/react@6.5.9" has unmet peer dependency "require-from-string@^2.0.2".
warning "workspace-aggregator-32c887be-73ce-46ec-9560-b972bcf57f31 > vite > babel-loader@8.2.5" has unmet peer dependency "webpack@>=2".
warning "workspace-aggregator-32c887be-73ce-46ec-9560-b972bcf57f31 > @springfield/server > swagger-ui-express@4.4.0" has unmet peer dependency "express@>=4.0.0".
warning "workspace-aggregator-32c887be-73ce-46ec-9560-b972bcf57f31 > @springfield/server > ts-loader@9.3.1" has unmet peer dependency "webpack@^5.0.0".
warning "workspace-aggregator-32c887be-73ce-46ec-9560-b972bcf57f31 > vite > @storybook/addon-actions > react-inspector@5.1.1" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "workspace-aggregator-32c887be-73ce-46ec-9560-b972bcf57f31 > vite > @storybook/react > react-element-to-jsx-string@14.3.4" has incorrect peer dependency "react@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
warning "workspace-aggregator-32c887be-73ce-46ec-9560-b972bcf57f31 > vite > @storybook/react > react-element-to-jsx-string@14.3.4" has incorrect peer dependency "react-dom@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
warning "workspace-aggregator-32c887be-73ce-46ec-9560-b972bcf57f31 > @springfield/server > octokit > @octokit/plugin-paginate-rest@2.21.2" has incorrect peer dependency "@octokit/core@>=4".
warning "@storybook/builder-vite > @storybook/mdx1-csf > @babel/preset-env@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/builder-vite > @storybook/mdx1-csf > @mdx-js/react@1.6.22" has unmet peer dependency "react@^16.13.1 || ^17.0.0".
warning "@storybook/builder-vite > @storybook/source-loader@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/builder-vite > @storybook/source-loader@6.5.9" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/builder-vite > @joshwooding/vite-plugin-react-docgen-typescript > react-docgen-typescript@2.2.2" has unmet peer dependency "typescript@>= 4.3.x".
warning "@storybook/builder-vite > @joshwooding/vite-plugin-react-docgen-typescript@0.0.4" has unmet peer dependency "typescript@>= 4.3.x".
warning "@storybook/builder-vite > @joshwooding/vite-plugin-react-docgen-typescript@0.0.4" has unmet peer dependency "vite@>2.0.0-0".
warning " > @storybook/builder-vite@0.1.39" has unmet peer dependency "@storybook/core-common@>=6.4.3 || >=6.5.0-alpha.0".
warning " > @storybook/builder-vite@0.1.39" has unmet peer dependency "@storybook/node-logger@>=6.4.3 || >=6.5.0-alpha.0".
warning " > @storybook/builder-vite@0.1.39" has unmet peer dependency "@storybook/source-loader@>=6.4.3 || >=6.5.0-alpha.0".
warning " > @storybook/builder-vite@0.1.39" has unmet peer dependency "vite@>=2.6.7".
error An unexpected error occurred: "expected workspace package to exist for \"vite-tsconfig-paths\"".
info If you think this is a bug, please open a bug report with the information provided in "/Users/aknag/ps5-app-releases-service/client/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
❯ yarn add -D @storybook/builder-vite vite-tsconfig-paths
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "workspace-aggregator-d0372a7e-404a-479a-8964-17437f995912 > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-jsx-a11y@^6.5.1".
warning "workspace-aggregator-d0372a7e-404a-479a-8964-17437f995912 > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-react@^7.28.0".
warning "workspace-aggregator-d0372a7e-404a-479a-8964-17437f995912 > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-react-hooks@^4.3.0".
warning "workspace-aggregator-d0372a7e-404a-479a-8964-17437f995912 > ts-node@10.8.2" has unmet peer dependency "@types/node@*".
warning "workspace-aggregator-d0372a7e-404a-479a-8964-17437f995912 > vite > @storybook/react@6.5.9" has unmet peer dependency "require-from-string@^2.0.2".
warning "workspace-aggregator-d0372a7e-404a-479a-8964-17437f995912 > vite > babel-loader@8.2.5" has unmet peer dependency "webpack@>=2".
warning "workspace-aggregator-d0372a7e-404a-479a-8964-17437f995912 > @springfield/server > swagger-ui-express@4.4.0" has unmet peer dependency "express@>=4.0.0".
warning "workspace-aggregator-d0372a7e-404a-479a-8964-17437f995912 > @springfield/server > ts-loader@9.3.1" has unmet peer dependency "webpack@^5.0.0".
warning "workspace-aggregator-d0372a7e-404a-479a-8964-17437f995912 > vite > @storybook/addon-actions > react-inspector@5.1.1" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "workspace-aggregator-d0372a7e-404a-479a-8964-17437f995912 > vite > @storybook/react > react-element-to-jsx-string@14.3.4" has incorrect peer dependency "react@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
warning "workspace-aggregator-d0372a7e-404a-479a-8964-17437f995912 > vite > @storybook/react > react-element-to-jsx-string@14.3.4" has incorrect peer dependency "react-dom@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
warning "workspace-aggregator-d0372a7e-404a-479a-8964-17437f995912 > @springfield/server > octokit > @octokit/plugin-paginate-rest@2.21.2" has incorrect peer dependency "@octokit/core@>=4".
warning "@storybook/builder-vite > @storybook/mdx1-csf > @babel/preset-env@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@storybook/builder-vite > @storybook/mdx1-csf > @mdx-js/react@1.6.22" has unmet peer dependency "react@^16.13.1 || ^17.0.0".
warning "@storybook/builder-vite > @storybook/source-loader@6.5.9" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/builder-vite > @storybook/source-loader@6.5.9" has unmet peer dependency "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0".
warning "@storybook/builder-vite > @joshwooding/vite-plugin-react-docgen-typescript > react-docgen-typescript@2.2.2" has unmet peer dependency "typescript@>= 4.3.x".
warning "@storybook/builder-vite > @joshwooding/vite-plugin-react-docgen-typescript@0.0.4" has unmet peer dependency "typescript@>= 4.3.x".
warning "@storybook/builder-vite > @joshwooding/vite-plugin-react-docgen-typescript@0.0.4" has unmet peer dependency "vite@>2.0.0-0".
warning " > @storybook/builder-vite@0.1.39" has unmet peer dependency "@storybook/core-common@>=6.4.3 || >=6.5.0-alpha.0".
warning " > @storybook/builder-vite@0.1.39" has unmet peer dependency "@storybook/node-logger@>=6.4.3 || >=6.5.0-alpha.0".
warning " > @storybook/builder-vite@0.1.39" has unmet peer dependency "@storybook/source-loader@>=6.4.3 || >=6.5.0-alpha.0".
warning " > @storybook/builder-vite@0.1.39" has unmet peer dependency "vite@>=2.6.7".
warning " > vite-tsconfig-paths@3.5.0" has unmet peer dependency "vite@>2.0.0-0".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
info All dependencies
├─ @storybook/builder-vite@0.1.39
├─ vite-tsconfig-paths@3.5.0
└─ vite@0.0.0
✨  Done in 12.02s.
❯ yarn add -D tailwind-css-variables
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "workspace-aggregator-c4328b8c-fdfa-4af0-ac4f-b5b41ba349cb > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-jsx-a11y@^6.5.1".
warning "workspace-aggregator-c4328b8c-fdfa-4af0-ac4f-b5b41ba349cb > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-react@^7.28.0".
warning "workspace-aggregator-c4328b8c-fdfa-4af0-ac4f-b5b41ba349cb > eslint-config-airbnb@19.0.4" has unmet peer dependency "eslint-plugin-react-hooks@^4.3.0".
warning "workspace-aggregator-c4328b8c-fdfa-4af0-ac4f-b5b41ba349cb > ts-node@10.8.2" has unmet peer dependency "@types/node@*".
warning "workspace-aggregator-c4328b8c-fdfa-4af0-ac4f-b5b41ba349cb > vite > @storybook/builder-vite@0.1.39" has unmet peer dependency "@storybook/core-common@>=6.4.3 || >=6.5.0-alpha.0".
warning "workspace-aggregator-c4328b8c-fdfa-4af0-ac4f-b5b41ba349cb > vite > @storybook/builder-vite@0.1.39" has unmet peer dependency "@storybook/node-logger@>=6.4.3 || >=6.5.0-alpha.0".
warning "workspace-aggregator-c4328b8c-fdfa-4af0-ac4f-b5b41ba349cb > vite > @storybook/builder-vite@0.1.39" has unmet peer dependency "@storybook/source-loader@>=6.4.3 || >=6.5.0-alpha.0".
warning "workspace-aggregator-c4328b8c-fdfa-4af0-ac4f-b5b41ba349cb > vite > @storybook/react@6.5.9" has unmet peer dependency "require-from-string@^2.0.2".
warning "workspace-aggregator-c4328b8c-fdfa-4af0-ac4f-b5b41ba349cb > vite > babel-loader@8.2.5" has unmet peer dependency "webpack@>=2".
warning "workspace-aggregator-c4328b8c-fdfa-4af0-ac4f-b5b41ba349cb > @springfield/server > swagger-ui-express@4.4.0" has unmet peer dependency "express@>=4.0.0".
warning "workspace-aggregator-c4328b8c-fdfa-4af0-ac4f-b5b41ba349cb > @springfield/server > ts-loader@9.3.1" has unmet peer dependency "webpack@^5.0.0".
warning "workspace-aggregator-c4328b8c-fdfa-4af0-ac4f-b5b41ba349cb > vite > @storybook/addon-actions > react-inspector@5.1.1" has incorrect peer dependency "react@^16.8.4 || ^17.0.0".
warning "workspace-aggregator-c4328b8c-fdfa-4af0-ac4f-b5b41ba349cb > vite > @storybook/react > react-element-to-jsx-string@14.3.4" has incorrect peer dependency "react@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
warning "workspace-aggregator-c4328b8c-fdfa-4af0-ac4f-b5b41ba349cb > vite > @storybook/react > react-element-to-jsx-string@14.3.4" has incorrect peer dependency "react-dom@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
warning "workspace-aggregator-c4328b8c-fdfa-4af0-ac4f-b5b41ba349cb > @springfield/server > octokit > @octokit/plugin-paginate-rest@2.21.2" has incorrect peer dependency "@octokit/core@>=4".
warning "workspace-aggregator-c4328b8c-fdfa-4af0-ac4f-b5b41ba349cb > vite > @storybook/addon-essentials > @storybook/addon-docs > @mdx-js/react@1.6.22" has incorrect peer dependency "react@^16.13.1 || ^17.0.0".
error An unexpected error occurred: "expected workspace package to exist for \"@storybook/builder-vite\"".
info If you think this is a bug, please open a bug report with the information provided in "/Users/aknag/ps5-app-releases-service/client/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

[IanVS]

@AskAlice I wasn't able to reproduce this in a new project without vite. Do you have any hints on how I can reproduce this?

[timonmasberg]

I am receiving the same error as @AskAlice trying to start Storybook after a clean installation in Svelte with Vite

[IanVS]

I've updated the README to mention the versions of vite required. @timonmasberg would you mind opening a new issue with the details of what you're seeing? Thanks!

[timonmasberg]

After upgrading Vite to v3 it works, thanks for clarifying.