storybook build fails in CI

[henrikbossart]

Summary

Locally, everything works fine, but when I try to build in CI, the build fails. Kinda hard to debug when its not occurring locally..
Using storybook with React, Vite and Bun.

Additional information

The following error occurs when running storybook build -o storybook-static --config-dir .storybook in github actions.

Since the actual Rollup error is cryptic, I'm not really sure how to proceed. Maybe someone else has encountered something similar?

info => Copying static files: public at storybook-static
  transforming...
  ✓ 1 modules transformed.
  x Build failed in 120ms
  => Failed to build the preview
  '�����������-�������0���.�������2���Q (Note that you need plugins to import files that are not JavaScript)
  file: ./iframe.html
  RollupError: '�����������-�������0���.�������2���Q
      at getRollupError (file:///home/runner/work/kyv-components/kyv-components/node_modules/rollup/dist/es/shared/parseAst.js:396:41)
      at PanicError.initialise (file:///home/runner/work/kyv-components/kyv-components/node_modules/rollup/dist/es/shared/node-entry.js:11320:28)
      at convertNode (file:///home/runner/work/kyv-components/kyv-components/node_modules/rollup/dist/es/shared/node-entry.js:13082:10)
      at Array.property (file:///home/runner/work/kyv-components/kyv-components/node_modules/rollup/dist/es/shared/node-entry.js:12942:22)
      at convertNode (file:///home/runner/work/kyv-components/kyv-components/node_modules/rollup/dist/es/shared/node-entry.js:13081:28)
      at convertProgram (file:///home/runner/work/kyv-components/kyv-components/node_modules/rollup/dist/es/shared/node-entry.js:12399:12)
      at Module.setSource (file:///home/runner/work/kyv-components/kyv-components/node_modules/rollup/dist/es/shared/node-entry.js:14246:24)
      at async ModuleLoader.addModuleSource (file:///home/runner/work/kyv-components/kyv-components/node_modules/rollup/dist/es/shared/node-entry.js:18892:13)

Storybook version: 8.3.1
package manager: bun v1.1.27

main.ts

import { dirname, join } from 'path'
import type { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.tsx'],
  staticDirs: ['../public'],

  addons: [
    getAbsolutePath('@storybook/addon-links'),
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@chromatic-com/storybook'),
    getAbsolutePath('@storybook/addon-interactions'),
  ],

  framework: {
    name: getAbsolutePath('@storybook/react-vite'),
    options: {
      builder: {},
    },
  },

  swc: () => ({
    jsc: {
      transform: {
        react: {
          runtime: 'automatic',
        },
      },
    },
  }),

  typescript: {
    reactDocgen: 'react-docgen-typescript',
  },

  docs: {},
}
export default config

function getAbsolutePath(value: string): string {
  return dirname(require.resolve(join(value, 'package.json')))
}

Create a reproduction

No response

[hisuwh]

We're seeing a similar issue. It builds fine locally but then fails on ci:

[storybook:vue-docgen-plugin] ENOENT: no such file or directory, open '../../../node_modules/primevue/message/index.mjs'
file: ./src/components/forms/kit/AMessage.vue
    at Object.readFileSync (node:fs:448:[20](https://github.com/company/ALaRMS/actions/runs/11053304904/job/30707361411?pr=6758#step:7:21))
    at getTypeDefinitionFromIdentifierFromModule (./node_modules/vue-docgen-api/src/script-setup-handlers/utils/tsUtils.ts:38:7)
    at Context.visitImportSpecifier (./node_modules/vue-docgen-api/src/script-setup-handlers/utils/tsUtils.ts:86:16)
    at Context.invokeVisitorMethod (./node_modules/ast-types/lib/path-visitor.js:283:51)
    at PVp.visitWithoutReset (./node_modules/ast-types/lib/path-visitor.js:158:32)
    at NodePath.each (./node_modules/ast-types/lib/path.js:88:26)
    at visitChildren (./node_modules/ast-types/lib/path-visitor.js:179:18)
    at PVp.visitWithoutReset (./node_modules/ast-types/lib/path-visitor.js:167:20)
    at visitChildren (./node_modules/ast-types/lib/path-visitor.js:204:[25](https://github.com/AquilaLearning/ALaRMS/actions/runs/11053304904/job/30707361411?pr=6758#step:7:26))
    at PVp.visitWithoutReset (./node_modules/ast-types/lib/path-visitor.js:167:20)

Not sure why it has a relative path: ../../../node_modules/ - relative to the component that its failing on it should be ../../../../node_modules/

[hisuwh]

No we haven't made any more progress on this.

This also only fails on CI (Azure DevOps)

This is sad to hear. This is the next thing we were going to try.

[henrikbossart]

But you are all getting readable errors? and not the '�����������-�������0���.�������2���Q (Note that you need plugins to import files that are not JavaScript) messages?

[simonvizzini]

But you are all getting readable errors? and not the '�����������-�������0���.�������2���Q (Note that you need plugins to import files that are not JavaScript) messages?

Yes, I get the exact same error has hisuwah, with the exact same stack trace and wrong relative import path. So it seems like two separate issues, with the common detail that both issues fail on CI but work locally.

I'll check the getTypeDefinitionFromIdentifierFromModule function of the vue-docgen-api module, because the file that fails is importing types from the offending module and it seems to be an issue with the type definitions.

[simonvizzini]

Last week a new Vite major versionw was released. I updated our project to Vite 6.0.2 and Storybook 8.4.6 and since then the build finally works on our CI.

[OwenPattison]

I can also confirm that this has been working since upgrading. thanks for the heads up @simonvizzini