search

storybookjs / builder-vite

A builder plugin to run and build Storybooks with Vite
MIT License
886 stars 109 forks source link

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

Closed viveleroi closed 1 year ago

viveleroi commented 1 year ago

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

IanVS commented 1 year ago

It looks like maybe you're using yarn pnp? This version of the vite builder does not work with yarn pnp very well, see https://github.com/storybookjs/builder-vite/issues/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.

viveleroi commented 1 year ago

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
  }
};
IanVS commented 1 year ago

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?

viveleroi commented 1 year ago

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.

IanVS commented 1 year ago

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
viveleroi commented 1 year ago

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",
IanVS commented 1 year ago

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 https://github.com/storybookjs/storybook/pull/19689 is merged and released, you won't need all those addons either, only the ones you specify in your main.cjs directly.

viveleroi commented 1 year ago

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")
IanVS commented 1 year ago

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)

viveleroi commented 1 year ago

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)
viveleroi commented 1 year ago

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 commented 1 year ago

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
    }
}
IanVS commented 1 year ago

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