Stencil build generates weird ESM import/export syntax in component files

[twin jasper]

Hey,

When building Stencil, the output generated in <conponent>_<incr>.entry.js seems to be malformed?

E.g.

export { H as h_alert, a as h_app_bar, b as h_app_bar_title, c as h_avatar, e as h_badge, f as h_button, g as h_card, h as h_card_actions, i as h_card_text, j as h_card_title, k as h_checkbox, l as h_col, m as h_container, n as h_dropdown, o as h_icon, p as h_list_options, q as h_menu, r as h_menu_item, s as h_popover, t as h_radio, u as h_radio_group, v as h_row, w as h_select, x as h_select_option, y as h_spacer, z as h_tag, A as h_text_field } from './h-alert.h-app-bar.h-app-bar-title.h-avatar.h-badge.h-button.h-card.h-card-actions.h-card-text.h-card-title.h-checkbox.h-col.h-container.h-dropdown.h-icon.h-list-options.h-menu.h-menu-item.h-popover.h-radio.h-radio-group.h-row.h-select.h-select-option.h-spacer.h-tag.h-text-field-f9e426ce.js';
import './index-dd9a7883.js';

When trying to load any Stencil component in Storybook, the above file produces the following error:

Internal server error: Failed to resolve import "./h-alert.h-app-bar.h-app-bar-title.h-avatar.h-badge.h-button.h-card.h-card-actions.h-card-text.h-card-title.h-checkbox.h-col.h-container.h-dropdown.h-icon.h-list-options.h-menu.h-menu-item.h-popover.h-radio.h-radio-group.h-row.h-select.h-select-option.h-spacer.h-tag.h-text-field-f9e426ce.js" from "dist/esm/h-alert_27.entry.js". Does the file exist?

My Stencil config:

import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';
import { reactOutputTarget } from '@stencil/react-output-target';
import { vueOutputTarget } from '@stencil/vue-output-target';
import { inlineSvg } from 'stencil-inline-svg';

export const config: Config = {
  autoprefixCss: true,
  namespace: 'ui-kit',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
      customElementsExportBehavior: 'auto-define-custom-elements',
      externalRuntime: false,
      copy: [
        {
          src: 'src/components/h-icon/icons/*.json',
          dest: 'dist/components/icons',
          warn: true,
        }
      ],
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'docs-json',
      file: '.storybook/docs.json'
    },
    {
      type: 'www',
      serviceWorker: null,
    },
    reactOutputTarget({
      componentCorePackage: '<redacted>',
      proxiesFile: '../react/lib/components/stencil-generated/index.ts',
      customElementsDir: 'dist/components',
      includeImportCustomElements: true,
    }),
    vueOutputTarget({
      componentCorePackage: '<redacted>',
      proxiesFile: '../vue/lib/components.ts',
    }),
  ],
  testing: {
    browserHeadless: "new",
  },
  plugins: [
    inlineSvg(),
    sass({
      injectGlobalPaths: ['src/styles/index.scss'],
    }),
  ],
  extras: {
    enableImportInjection: true, // Vite compat
  },
  enableCache: true,
};

Any thoughts?

[pulsar merlin]

How is Storybook and your Stencil project associated? Like, how are you consuming the components in Storybook?

[twin jasper]

I'm using defineCustomElements(); from loader in Storybooks preview.js and using them as simple web components

preview.js

import { defineCustomElements } from '../loader';
import { setStencilDocJson, extractArgTypesFactory } from '@pxtrn/storybook-addon-docs-stencil';
import docJson from './docs.json';

defineCustomElements();
if (docJson) setStencilDocJson(docJson);

/** @type { import('@storybook/web-components').Preview } */
const preview = {
  docs: {
    extractArgTypes: extractArgTypesFactory({ dashCase: true }),
  },
  parameters: {
    controls: {
      hideNoControlsWarning: true,
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

example component story:

export default {
  title: 'Proj/Alerts',
  render: ({ text, ...args }) => {
    return `<h-alert variant="${args.variant}">${text}</h-alert>`
  },
  argTypes: {
    text: { control: 'text' },
    loading: { control: 'boolean' },
    variant: {
      control: { type: 'select' },
      options: ['success', 'info', 'warning', 'error'],
    },
  },
};