[Bug]: storybook 8.0 + vite build error

[siosio34]

Describe the bug

When I ran Storybook in a development environment, I confirmed that it worked well.

However, the moment I type storybook build to build, it does not work as desired.

There are three types of error logs, which are as follows.

1. ./sb-common-assets/fonts.css doesn't exist at build time, it will remain unchanged to be resolved at runtime

2. Error when using sourcemap for reporting an error: Can't resolve original location of error.

3. RollupError: Expected ',', got ':'

To Reproduce

No response

System

System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn <----- active
    npm: 9.6.7 - /opt/homebrew/bin/npm
    pnpm: 8.14.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 122.0.6261.129
    Safari: 17.3.1
  npmPackages:
    @storybook/addon-actions: ^8.0.0 => 8.0.0 
    @storybook/addon-designs: ^7.0.9 => 7.0.9 
    @storybook/addon-essentials: ^8.0.0 => 8.0.0 
    @storybook/addon-interactions: ^8.0.0 => 8.0.0 
    @storybook/addon-links: ^8.0.0 => 8.0.0 
    @storybook/addon-viewport: ^8.0.0 => 8.0.0 
    @storybook/react: ^8.0.0 => 8.0.0 
    @storybook/react-vite: ^8.0.0 => 8.0.0 
    @storybook/react-webpack5: ^8.0.0 => 8.0.0 
    @storybook/test: ^8.0.0 => 8.0.0 
    @storybook/test-runner: ^0.17.0 => 0.17.0 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    msw-storybook-addon: ^1.10.0 => 1.10.0 
    storybook: ^8.0.0 => 8.0.0 
    storybook-dark-mode: ^3.0.3 => 3.0.3

Additional context

No response

[valentinpalkovic]

Hi @siosio34

Thanks for reaching out!

The first error is known and is already reported here.

I am not sure about the second error.

The third error, though, might be related to the reported issue here: #25885. The reported solution is not to use storybook-dark-mode since it currently doesn't support Storybook 8 (At least a PR already exists: hipstersmoothie/storybook-dark-mode#251)

Additionally, please ensure that all your Storybook add-ons are compatible with Storybook 8.

[marcotas]

This is the error output I'm getting:

pnpm run build-storybook --output-dir /tmp/chromatic--1679-UGmFD91B011U

> @keela-co/keela-ui@0.2.1 build-storybook /Users/marco/project/project-ui
> storybook build "--output-dir" "/tmp/chromatic--1679-UGmFD91B011U"

@storybook/cli v8.0.0

info => Cleaning outputDir: ../../../../tmp/chromatic--1679-UGmFD91B011U
info => Loading presets
info => Building manager..
info => Manager built (245 ms)
info => Building preview..
WARN No story files found for the specified pattern: src/**/*.mdx

[vite:dts] You are building a library that may not need to generate declaration files.

vite v5.1.6 building for production...
✓ 755 modules transformed.
x Build failed in 9.42s
=> Failed to build the preview

    at Object.readFileSync (node:fs:453:20)
    at getTypeDefinitionFromIdentifierFromModule (./node_modules/.pnpm/vue-docgen-api@4.76.0_vue@3.4.21/node_modules/vue-docgen-api/src/script-setup-handlers/utils/tsUtils.ts:38:7)
    at Context.visitImportSpecifier (./node_modules/.pnpm/vue-docgen-api@4.76.0_vue@3.4.21/node_modules/vue-docgen-api/src/script-setup-handlers/utils/tsUtils.ts:86:16)
    at Context.invokeVisitorMethod (./node_modules/.pnpm/ast-types@0.16.1/node_modules/ast-types/lib/path-visitor.js:283:51)
    at PVp.visitWithoutReset (./node_modules/.pnpm/ast-types@0.16.1/node_modules/ast-types/lib/path-visitor.js:158:32)
    at NodePath.each (./node_modules/.pnpm/ast-types@0.16.1/node_modules/ast-types/lib/path.js:88:26)
    at visitChildren (./node_modules/.pnpm/ast-types@0.16.1/node_modules/ast-types/lib/path-visitor.js:179:18)
    at PVp.visitWithoutReset (./node_modules/.pnpm/ast-types@0.16.1/node_modules/ast-types/lib/path-visitor.js:167:20)
    at visitChildren (./node_modules/.pnpm/ast-types@0.16.1/node_modules/ast-types/lib/path-visitor.js:204:25)
    at PVp.visitWithoutReset (./node_modules/.pnpm/ast-types@0.16.1/node_modules/ast-types/lib/path-visitor.js:167:20)
✔ Would you like to help improve Storybook by sending anonymous crash reports? … yes
 ELIFECYCLE  Command failed with exit code 1.

I also created the file sb-common-assets/fonts.css in the root directory of the project and It just get rid of the first error, but still having problems. Any workaround so far?

[siosio34]

@valentinpalkovic

my storybook addonlist attach below. They all seem to be compatible with Storybook 8.0, but they don't work.

    "@storybook/addon-essentials": "^8.1.0-alpha.1",
    "@storybook/addon-interactions": "8.1.0-alpha.1",
    "@storybook/addon-links": "^8.1.0-alpha.1",

[valentinpalkovic]

@siosio34 Can you create a minimal reproduction via https://storybook.new or by providing a minimal reproduction repo?

[vasicvuk]

I am also having this error after updating to Storybook 8:

RollupError: Expected ',', got ':'
    at getRollupError (file://./node_modules/rollup/dist/es/shared/parseAst.js:376:41)
    at ParseError.initialise (file://./node_modules/rollup/dist/es/shared/node-entry.js:11158:28)
    at convertNode (file://./node_modules/rollup/dist/es/shared/node-entry.js:12898:10)
    at convertProgram (file://./node_modules/rollup/dist/es/shared/node-entry.js:12218:12)
    at Module.setSource (file://./node_modules/rollup/dist/es/shared/node-entry.js:14042:24)
    at async ModuleLoader.addModuleSource (file://./node_modules/rollup/dist/es/shared/node-entry.js:18681:13)

[siosio34]

@vasicvuk I'm really sorry, but can you create an example referring to the link #26494 (comment)?

Currently, my project is on an internal network, so it is not easy to create a reproduction of that part.

[vasicvuk]

Hi @siosio34, In my case, the issue was storybook-addon-mock which caused the issue, they have not updated it to Storybook 8.

Link to issue for update:
linearlabs-workspace/storybook-addon-mock#208

[siosio34]

Oh I found it. The issue occurred because you were using the deprecated @storybook/addons package. Sorry, this issue will be closed.

[siosio34]

No, I will reopen it. The build was successful, but issues 1 and 2 still occur. Issue number 1 even occurs in the official react-vite typescript example on the site https://storybook.new.

[valentinpalkovic]

So the first error is already tracked in a different issue and the third one seems to be caused by incompatible addons. So I would propose to either adjust the issue description or to create a new issue exclusively about your second error. Don't forget to provide a reproduction if possible.

[AriPerkkio]

I ran into this issue as well and resolved it by uninstalling @storybook/addons. I was using that package for accessing addons.getChannel() API which nowadays seems to be available in @storybook/preview-api package.

[evandroguedes-belvo]

This one did the trick for me.

#26494 (comment)

[siosio34]

This issue is closed. If you have a similar issue as me, please refer to the comment. #26494 (comment)