storybookjs/storybook

[Bug]: web-components project type does not produce a runnable build

Open

#25,704 opened on Jan 22, 2024

View on GitHub
 (4 comments) (3 reactions) (0 assignees)TypeScript (10,058 forks)batch import
buggood first issuehelp wantedquestion / supportweb-components

Repository metrics

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

Description

Describe the bug

Building storybook stories for web components does not work. The stories are running only in development mode.

Repo

https://github.com/vivere-dally/sb-stencil

To Reproduce

  • npm init stencil: choose components template
  • npm install
  • npm run build
  • npx storybook init: choose web-components template
  • add the following lines to ./.storybook/preview.js
import { defineCustomElements } from '../loader';

defineCustomElements();
  • create a story
import type { Meta, StoryObj } from '@storybook/web-components';

const meta: Meta = {
  component: 'my-component',
};

export default meta;
type Story = StoryObj;

export const Example: Story = {
  args: {
    first: 'AAA',
    middle: 'BBB',
    last: 'CCC',
  }
}
  • npm run storybook: works
  • npm run build-storybook
  • python3 -m http.server

The stories are not loading.

System

Storybook Environment Info:

  System:
    OS: macOS 14.2.1
    CPU: (12) arm64 Apple M3 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm <----- active
  Browsers:
    Chrome: 120.0.6099.234
    Safari: 17.2.1

Contributor guide