[Bug] Failed to resolve import "@storybook/preview-web"

What version of vite are you using?

3.2.2

System info and storybook versions

Windows 11. Storybook 6.5.13. Node 16.10.0 x64. Yarn 3.2.4

Describe the Bug

I did a fresh install of storybook using npx storybook init --builder @storybook/builder-vite.

I then ran start-storybook -p 6006. The address opens in my browser and I get the following error:

[plugin:vite:import-analysis] Failed to resolve import "@storybook/preview-web" from "..\..\..\..\..\virtual:\@storybook\builder-vite\vite-app.js". Does the file exist?
/virtual:/@storybook/builder-vite/vite-app.js:1:45
1  |  import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
   |                                              ^
2  |      import { ClientApi } from '@storybook/client-api';
3  |      import '/virtual:/@storybook/builder-vite/setup-addons.js';
    at formatError (file:///C:/Users/mbotsko/Desktop/Emprise/sammweb-v3/.yarn/__virtual__/vite-virtual-f948f15dbd/0/cache/vite-npm-3.2.2-b6065be34d-7197ac91c6.zip/node_modules/vite/dist/node/chunks/dep-c842e491.js:41168:46)
    at TransformContext.error (file:///C:/Users/mbotsko/Desktop/Emprise/sammweb-v3/.yarn/__virtual__/vite-virtual-f948f15dbd/0/cache/vite-npm-3.2.2-b6065be34d-7197ac91c6.zip/node_modules/vite/dist/node/chunks/dep-c842e491.js:41164:19)
    at normalizeUrl (file:///C:/Users/mbotsko/Desktop/Emprise/sammweb-v3/.yarn/__virtual__/vite-virtual-f948f15dbd/0/cache/vite-npm-3.2.2-b6065be34d-7197ac91c6.zip/node_modules/vite/dist/node/chunks/dep-c842e491.js:38032:33)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async TransformContext.transform (file:///C:/Users/mbotsko/Desktop/Emprise/sammweb-v3/.yarn/__virtual__/vite-virtual-f948f15dbd/0/cache/vite-npm-3.2.2-b6065be34d-7197ac91c6.zip/node_modules/vite/dist/node/chunks/dep-c842e491.js:38165:47)
    at async Object.transform (file:///C:/Users/mbotsko/Desktop/Emprise/sammweb-v3/.yarn/__virtual__/vite-virtual-f948f15dbd/0/cache/vite-npm-3.2.2-b6065be34d-7197ac91c6.zip/node_modules/vite/dist/node/chunks/dep-c842e491.js:41421:30)
    at async loadAndTransform (file:///C:/Users/mbotsko/Desktop/Emprise/sammweb-v3/.yarn/__virtual__/vite-virtual

Link to Minimal Reproducible Example

No response

Participation

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

[viveleroi]

I appended the stack trace to my last comment in case that helps you. I really appreciate your time. I’ll close this as solved and I look forward to v7.

A decade ago, when we started the last major web project, I setup a bunch of isolated html pages with our design components. We’re now starting a fresh project with react/ts etc and I’m so pleased storybook exists, it’s what I did but 10x better.

[viveleroi]

Yes, it still happens even after I remove that line from main.cjs.

Here’s the full stack:

ERR! Error: Your application tried to access @storybook/builder-vite, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.
ERR!
ERR! Required package: @storybook/builder-vite (via "@storybook\builder-vite")
ERR! Required by: C:\Users\mbotsko\Desktop\Emprise\sammweb-v3\.storybook\
ERR!
ERR! Require stack:
ERR! - C:\Users\mbotsko\Desktop\Emprise\sammweb-v3\.yarn\__virtual__\@storybook-core-server-virtual-23951462ea\0\cache\@storybook-core-server-npm-7.0.0-alpha.47-4f2e47bbae-da8f15be91.zip\node_modules\@storybook\core-server\dist\cjs\utils\get-builders.js
ERR! - C:\Users\mbotsko\Desktop\Emprise\sammweb-v3\.yarn\__virtual__\@storybook-core-server-virtual-23951462ea\0\cache\@storybook-core-server-npm-7.0.0-alpha.47-4f2e47bbae-da8f15be91.zip\node_modules\@storybook\core-server\dist\cjs\build-static.js
ERR! - C:\Users\mbotsko\Desktop\Emprise\sammweb-v3\.yarn\__virtual__\@storybook-core-server-virtual-23951462ea\0\cache\@storybook-core-server-npm-7.0.0-alpha.47-4f2e47bbae-da8f15be91.zip\node_modules\@storybook\core-server\dist\cjs\index.js
ERR! - C:\Users\mbotsko\Desktop\Emprise\sammweb-v3\.yarn\cache\@storybook-cli-npm-7.0.0-alpha.47-3a7cd2f06b-ba9ce88192.zip\node_modules\@storybook\cli\dist\generate.js
ERR! - C:\Users\mbotsko\Desktop\Emprise\sammweb-v3\.yarn\cache\@storybook-cli-npm-7.0.0-alpha.47-3a7cd2f06b-ba9ce88192.zip\node_modules\@storybook\cli\bin\index.js
ERR! - C:\Users\mbotsko\Desktop\Emprise\sammweb-v3\.yarn\cache\storybook-npm-7.0.0-alpha.47-ea17075def-de1fea2e67.zip\node_modules\storybook\index.js
ERR!     at Function.require$$0.Module._resolveFilename (C:\Users\mbotsko\Desktop\Emprise\sammweb-v3\.pnp.cjs:26494:13)
ERR!     at Function.Module._resolveFilename (C:\Users\mbotsko\Desktop\Emprise\sammweb-v3\.yarn\__virtual__\esbuild-register-virtual-44836314f7\0\cache\esbuild-register-npm-3.3.3-fac3f08bfa-f43fecb9f5.zip\node_modules\esbuild-register\dist\node.js:4768:36)
ERR!     at Function.Module._resolveFilename (C:\Users\mbotsko\Desktop\Emprise\sammweb-v3\.yarn\__virtual__\esbuild-register-virtual-44836314f7\0\cache\esbuild-register-npm-3.3.3-fac3f08bfa-f43fecb9f5.zip\node_modules\esbuild-register\dist\node.js:4768:36)
ERR!     at Function.resolve (node:internal/modules/cjs/helpers:109:19)
ERR!     at getPreviewBuilder (C:\Users\mbotsko\Desktop\Emprise\sammweb-v3\.yarn\__virtual__\@storybook-core-server-virtual-23951462ea\0\cache\@storybook-core-server-npm-7.0.0-alpha.47-4f2e47bbae-da8f15be91.zip\node_modules\@storybook\core-server\dist\cjs\utils\get-builders.js:22:30)
ERR!     at getBuilders (C:\Users\mbotsko\Desktop\Emprise\sammweb-v3\.yarn\__virtual__\@storybook-core-server-virtual-23951462ea\0\cache\@storybook-core-server-npm-7.0.0-alpha.47-4f2e47bbae-da8f15be91.zip\node_modules\@storybook\core-server\dist\cjs\utils\get-builders.js:43:23)
ERR!     at async buildDevStandalone (C:\Users\mbotsko\Desktop\Emprise\sammweb-v3\.yarn\__virtual__\@storybook-core-server-virtual-23951462ea\0\cache\@storybook-core-server-npm-7.0.0-alpha.47-4f2e47bbae-da8f15be91.zip\node_modules\@storybook\core-server\dist\cjs\build-dev.js:112:28)
ERR!     at async withTelemetry (C:\Users\mbotsko\Desktop\Emprise\sammweb-v3\.yarn\__virtual__\@storybook-core-server-virtual-23951462ea\0\cache\@storybook-core-server-npm-7.0.0-alpha.47-4f2e47bbae-da8f15be91.zip\node_modules\@storybook\core-server\dist\cjs\withTelemetry.js:72:5)
ERR!     at async In (C:\Users\mbotsko\Desktop\Emprise\sammweb-v3\.yarn\cache\@storybook-cli-npm-7.0.0-alpha.47-3a7cd2f06b-ba9ce88192.zip\node_modules\@storybook\cli\dist\generate.js:277:2113)