[Bug] Failed to resolve import "@storybook/preview-web"
viveleroi opened this issue · comments
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.
It looks like maybe you're using yarn pnp? This version of the vite builder does not work with yarn pnp very well, see #141. But, if you're willing to try out the latest 7.0 alpha versions, support is much better there (though maybe not yet perfect, you may still need to install a few packages manually). You can upgrade using npx sb@next upgrade --prerelease
. If you can't upgrade, you could try installing @storybook/preview-web
in your project manually, along with about 10 or so other storybook dependencies.
I am using pnp. I actually had originally tried this on sb 7 alpha 47. I tried sb 6 hoping it would work. I get the same issues on both but this time I installed all of the packages it errored on:
@storybook/preview-web
@storybook/client-api
@storybook/channel-postmessage
@storybook/channel-websocket
@storybook/addons
I got all of those installed but now I get this error:
Expected your framework's preset to export a `renderToDOM` field.
Perhaps it needs to be upgraded for Storybook 6.4?
More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field
My .storybook/main.js
is pretty much default, although I added the builder to core
as your readme suggested.
module.exports = {
stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
framework: {
name: "@storybook/react-vite",
options: {}
},
core: { builder: "@storybook/builder-vite" },
features: {
storyStoreV7: true
}
};
Expected your framework's preset to export a
renderToDOM
field.
This is coming from a mis-match of storybook versions. Can you run npx sb@next info
and share the results?
Yes, I realized with some googling that I wasn't installing the alphas of those packages. Am doing that now.
I had to install a few more packages:
@storybook/addon-backgrounds
@storybook/addon-measure
@storybook/addon-outline
@storybook/addon-highlight
But it seems to be booting now. Obviously this is an alpha but man that's a lot of packages.
If you're using the alpha, you can probably remove most of the storybook packages. You'll need storybook
, the framework package (like @storybook/react-vite
), and the renderer, (e.g. @storybook/react
), and the addons. I have a PR waiting for review which would avoid having to install all the sub-addons of essentials.
In other words, if you're on the alpha, you can remove:
@storybook/preview-web
@storybook/client-api
@storybook/channel-postmessage
@storybook/channel-websocket
@storybook/addons
Ok I've removed those and it does seem to still work. Here's what I'm left with at the end of this process:
"@mdx-js/react": "^1.6.22",
"@storybook/addon-actions": "^7.0.0-alpha.47",
"@storybook/addon-backgrounds": "^7.0.0-alpha.47",
"@storybook/addon-docs": "^7.0.0-alpha.47",
"@storybook/addon-essentials": "^7.0.0-alpha.47",
"@storybook/addon-highlight": "^7.0.0-alpha.47",
"@storybook/addon-interactions": "^7.0.0-alpha.47",
"@storybook/addon-links": "^7.0.0-alpha.47",
"@storybook/addon-measure": "^7.0.0-alpha.47",
"@storybook/addon-outline": "^7.0.0-alpha.47",
"@storybook/builder-vite": "^7.0.0-alpha.47",
"@storybook/react": "^7.0.0-alpha.47",
"@storybook/react-vite": "7.0.0-alpha.47",
"@storybook/testing-library": "^0.0.14-next.0",
"eslint-plugin-storybook": "^0.6.7",
"storybook": "7.0.0-alpha.47",
That mostly looks correct, though you shouldn't need @mdx-js/react
(7.0 uses mdx2) or @storybook/builder-vite
(it's included with @storybook/react-vite
. If storybookjs/storybook#19689 is merged and released, you won't need all those addons either, only the ones you specify in your main.cjs
directly.
I can remove the mdx one but I need the builder-vite package because it throws an error without it... likely thanks to yarn 3.
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")
oh interesting, I didn't know about that one. Does it still happen if you remove this line from your main.cjs? core: { builder: "@storybook/builder-vite" },
(that's no longer necessary in 7.0)
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)
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.
I don't know if this is related but I'm realizing I'm not seeing any docs or controls. I see my components but only in canvas mode. I haven't disabled docs via main.cjs, I have the addons-essentials listed and installed (default from init).
Here's a very rough sb 7 story, I don't see any reason this would breaks docs.
import { Button, ButtonProps } from './buttons'
import type { Meta, StoryObj } from '@storybook/react'
import { Accents } from 'types/branding'
const meta: Meta<ButtonProps> = {
title: 'Components/Buttons',
component: Button,
argTypes: {
accent: {
options: [Accents.BLUE, Accents.RED],
control: 'select'
}
}
}
export default meta
export const Accented: StoryObj<typeof Button> = {
render(args: ButtonProps): JSX.Element {
return <Button {...args}>Text</Button>
},
args: {
accent: Accents.BLUE
}
}
I see that shilman answered in discord: https://discord.com/channels/486522875931656193/915642585761075280/1038741649293062174
TLDR for anyone else: docs are opt in https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#docs-page