storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.98k stars 9.23k forks source link

Could not resolve "./sb-preview/runtime.js" from "iframe.html" #26841

Open liang1403 opened 5 months ago

liang1403 commented 5 months ago

Describe the bug

> @products/base-portal-lib@0.0.0 build-storybook
> storybook build

@storybook/cli v8.0.8

info => Cleaning outputDir: storybook-static
info => Loading presets
info => Building manager..
info => Manager built (81 ms)
info => Building preview..
vite v4.5.2 building for production...

./sb-common-assets/fonts.css doesn't exist at build time, it will remain unchanged to be resolved at runtime
✓ 17 modules transformed.
✓ built in 6.92s
Could not resolve "./sb-preview/runtime.js" from "iframe.html"
file: /Users/ruslanbabich/Documents/GitHub/baseportal/frontend/components/base-portal-lib/iframe.html
=> Failed to build the preview
RollupError: Could not resolve "./sb-preview/runtime.js" from "iframe.html"
    at error (file:///Users/ruslanbabich/Documents/GitHub/baseportal/frontend/node_modules/.pnpm/rollup@3.29.4/node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
    at ModuleLoader.handleInvalidResolvedId (file:///Users/ruslanbabich/Documents/GitHub/baseportal/frontend/node_modules/.pnpm/rollup@3.29.4/node_modules/rollup/dist/es/shared/node-entry.js:24860:24)
    at file:///Users/ruslanbabich/Documents/GitHub/baseportal/frontend/node_modules/.pnpm/rollup@3.29.4/node_modules/rollup/dist/es/shared/node-entry.js:24822:26
transforming (2896) src/components/Base/TreeView/misc/nodeEvents.ts

base-portal-lib - is root library of project in a monorepo. Why is iframe.html created in it instead of base-portal-lib/storybook-static?

P.S.: Also later it randomly hangs on transforming TS files...

To Reproduce

Configuration: Vue 3 + Vite, Storybook 8.0.8 (default setup + msw-storybook-addon)

Just run npm run build-storybook

System

Storybook Environment Info:

  System:
    OS: macOS 14.2.1
    CPU: (16) arm64 Apple M3 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - /usr/local/bin/node
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.14.1 - /usr/local/bin/pnpm <----- active
  Browsers:
    Chrome: 123.0.6312.122
    Safari: 17.2.1

Additional context

No response

Dtsiantaris commented 3 months ago

Did you have any luck with this one?

gdfreitas commented 1 week ago

Hi everyone, please double-check your .storybook/main.ts file. I faced this issue because I ended up overriding the default config.build and config.build.rollupOptions properties.

To fix this, I simply needed to extend the default config using the spread operator.

  async viteFinal(config) {
    return {
      ...config,
      esbuild: {
        jsx: 'automatic',
      },
      build: {
        ...config.build,  // 👈🏻
        rollupOptions: { 
          ...config.build.rollupOptions,  // 👈🏻
          onwarn(warning, warn) {
            // Suppress "module level directives cause errors when bundled" warnings
            if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
              return;
            }
            warn(warning);
          },
        },
      },
    };
  },