[Docs] Clarify vite peer dependency requirements in README

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 https://github.com/fwouts/hungry/pull/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.

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:11 (6 by maintainers)

Top GitHub Comments

18reactions

timonmasbergcommented, Jul 14, 2022

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

1reaction

AskAlicecommented, Jul 11, 2022

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.

Top Results From Across the Web

Dependency Pre-Bundling - Vite

Therefore, Vite must convert dependencies that are shipped as CommonJS or UMD into ESM first. When converting CommonJS dependencies, Vite performs smart import ......

styled-components - npm

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress. Latest version: 5.3.6, ......

@mui/system | Yarn - Package Manager

Fast, reliable, and secure dependency management.

pnpm missing peer | The AI Search Engine You Control

pnpm create vite@latest pnpx sb@next init --builder=vite pnpm run storybook. Yields. WARN Issues with peer dependencies found .

bkimminich/juice-shop - Gitter

Used docs to setup but getting error trying to run. /usr/lib/node_modules/juice-shop-ctf-cli/index.js:74 ... You must install peer dependencies yourself.