[Bug]: Can't build storybook after setCustomElementsManifest
#28,340 opened on Jun 25, 2024
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
- Clone the above repo
- Install npm modules (
npm install) - Run storybook in dev mode to confirm that autodocs are generated and include element attributes from custom-elements.json ('npm run storybook`)
- Close dev storybook
- 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:
- 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
- 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.jsfile with reference tocustom-elements.json -
import { setCustomElementsManifest } from '@storybook/web-components'; import customElements from '../custom-elements.json' with { type: "json" }; setCustomElementsManifest(customElements);
- Update