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

vivere-dally commented 7 months ago

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
```ts
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

totoczko commented 7 months ago

@vivere-dally Hi! I had the same issue and in my case adding

extras: {
    experimentalImportInjection: true,
 },

to the stencil.config.ts helped :)

source: https://stenciljs.com/docs/v2/config-extras#experimentalimportinjection

janivo commented 7 months ago

We had a similiar issue after upgrading our storybook from v6 to v7 and switching to the Vite builder. In Development everyhing worked fine but our prod deployment showed the same kind of errors. Seems like Stencil components have problems to be integrated into Vite-based projects. @totoczko suggestion worked like a charm!

storybookjs / storybook