[Bug]: Can't build storybook after setCustomElementsManifest

[jwynveen]

Describe the bug

Using the open-wc project template for a LitElement project that includes a Storybook setup (using @storybook/web-components), after adding configuration to generate autodocs from the custom-elements.json, the project is unable to run storybook build to generate a static version of the site. It fails with the following error:

RollupError: Expected ';', '}' or at Object.getRollupError (./node_modules/rollup/dist/shared/parseAst.js:282:41) at ParseError.initialise (./node_modules/rollup/dist/shared/rollup.js:12774:40) at convertNode (./node_modules/rollup/dist/shared/rollup.js:14524:10) at convertProgram (./node_modules/rollup/dist/shared/rollup.js:13841:12) at Module.setSource (./node_modules/rollup/dist/shared/rollup.js:15681:24) at async ModuleLoader.addModuleSource (./node_modules/rollup/dist/shared/rollup.js:19983:13)

Reproduction link

https://github.com/jwynveen/open-wc-custom-elements-repro

Reproduction steps

1. Clone the above repo
2. Install npm modules (npm install)
3. Run storybook in dev mode to confirm that autodocs are generated and include element attributes from custom-elements.json ('npm run storybook`)
4. Close dev storybook
5. Run storybook build (npm run storybook:build)

System

Storybook Environment Info:

  System:
    OS: macOS 14.4.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.0 - ~/.nvm/versions/node/v20.12.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.0/bin/npm <----- active
  Browsers:
    Chrome: 126.0.6478.126
    Safari: 17.4.1
  npmPackages:
    @storybook/addon-a11y: ^7.6.20 => 7.6.20 
    @storybook/addon-essentials: ^7.6.20 => 7.6.20 
    @storybook/addon-links: ^7.6.20 => 7.6.20 
    @storybook/web-components: ^7.6.20 => 7.6.20 
    storybook: ^7.6.20 => 7.6.20

Additional context

This repo was generated from the open-wc template using the following process:

1. Init project: npm init @open-wc
   • Scaffold a new project
   • Web Component
   • Select all options to include (linting, testing, demoing)
   • Typescript: no
   • name: open-wc
   • install dependencies with NPM
2. Setup autodocs
   • Update .storybook/main.js

   • const config = {
     ...
     docs: {
       autodocs: true,
     },
     addons: [
       '@storybook/addon-essentials',
       '@storybook/addon-links',
     ],
     ...
     }

   • Follow setup instructions from https://github.com/storybookjs/storybook/blob/v7.6.19/code/addons/docs/web-components/README.md to add .storybook/preview.js file with reference to custom-elements.json

   • import { setCustomElementsManifest } from '@storybook/web-components';
     import customElements from '../custom-elements.json' with { type: "json" };
     setCustomElementsManifest(customElements);

[shilman]

Hi @jwynveen have you tried upgrading to 8.x? I doubt it will fix the problem, but you're more likely to get help on the latest version.

npx storybook@latest upgrade

Migration guide: https://storybook.js.org/docs/8.0/migration-guide