[Bug] Failed to resolve import "@storybook/preview-web" #518
Comments
viveleroi
changed the title
|
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 |
|
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: I got all of those installed but now I get this error: My 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
}
}; |
This is coming from a mis-match of storybook versions. Can you run |
|
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: 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 In other words, if you're on the alpha, you can remove: |
|
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: |
|
That mostly looks correct, though you shouldn't need |
|
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. |
|
oh interesting, I didn't know about that one. Does it still happen if you remove this line from your main.cjs? |
|
Yes, it still happens even after I remove that line from main.cjs. Here's the full stack: |
|
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 |
What version of
viteare 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:Link to Minimal Reproducible Example
No response
Participation
The text was updated successfully, but these errors were encountered: