[Bug]: web-components project type does not produce a runnable build · storybookjs/storybook#25704

(4 commentaires) (3 réactions) (0 assignés)TypeScript (10 058 forks)batch import

buggood first issuehelp wantedquestion / supportweb-components

Métriques du dépôt

Stars: (89 909 stars)
Métriques de merge PR: (Merge moyen 7j 22h) (184 PRs mergées en 30 j)

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

Guide contributeur

Direction de recherche: Examinez la configuration de build du package web components dans `@storybook/web components`. Assurez vous que le fichier de chargeur Stencil (`loader/index.esm.js`) est correctement inclus dans la sortie de build de production. Vérifiez le `preview.js` généré pour confirmer que `defineCustomElements` est importé et appelé. Examinez la configuration rollup ou webpack pour ce framework pour voir si le chargeur est élagué (tree shaken) ou omis. Passez également en revue les changements récents apportés au package web components qui pourraient avoir cassé la build. La reproduction du problème utilise le modèle de composants de Stencil, donc envisagez si le correctif nécessite des mises à jour des modèles de CLI d'initialisation.
Stack technique: typescriptweb componentsnodejs
Domaine: frontend
Type d'issue: Bug
Difficulté: 3
Temps estimé: Une demi journée
Statut d'activité: Active
Clarté: Claire
Prérequis: StorybookWeb Componentsnpm
Accessibilité débutant: 60