storybookjs/storybook

[Bug]: Can't build storybook after setCustomElementsManifest

Open

#28,340 opened on Jun 25, 2024

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (10,058 forks)batch import
bughelp wantedweb-components

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (Avg merge 7d 22h) (184 merged PRs in 30d)

Description

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);
      

Contributor guide