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

[vivere-dally]

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

[totoczko]

@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]

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!