storybook [Bug]:错误:提供的组件需要是一个字符串,例如,组件:"my-element"

piv4azn7  于 3个月前  发布在  其他
关注(0)|答案(1)|浏览(22)

描述问题

我正在使用stencilJs(webcomponents)storybook,并从6.5升级到7.0。我发现了一个问题,其他人也在discord上报告过,在使用webcomponents时,在.stories文件的元部分导入组件会导致以下错误。
Error: Provided component needs to be a string. e.g. component: "my-element"

根据我的理解,当时并不支持,即使在当前的文档中,似乎两年后仍然只在文档中使用了字符串'web-component'。然而,这在我们有20+个属性的组件中造成了问题,因为我们必须在其中定义所有的属性,否则它们就不会出现在控件面板中。
另外想知道,如果不支持的话,子组件字段是否也不受支持?
谢谢
https://discord.com/channels/486522875931656193/490822506916347904/910471981625909250

重现问题

我没有可以分享的重现问题,因为仓库是私有的,但我会分享故事
main.js

const config = {
    stories: [{ directory: '../src/components', files: '**/*.stories.@(js|jsx|ts|tsx|mdx)' }],
    addons: ['@storybook/addon-links',
        '@storybook/addon-docs',
        '@storybook/addon-controls',
        '@storybook/addon-essentials', 
        '@storybook/addon-postcss', 
        '@storybook/addon-a11y', 
        'storybook-addon-designs', 
        '@storybook/addon-mdx-gfm'],
    staticDirs: ['../node_modules/.storybook-static-dir'],
    typescript: {
        reactDocgen: 'react-docgen-typescript',
        reactDocgenTypescriptOptions: {
          compilerOptions: {
            allowSyntheticDefaultImports: false,
            esModuleInterop: false,
          },
          propFilter: () => true,
        },
      },
    webpackFinal: async (config, {
        configType
    }) => {
        config.module.rules.push({
            test: /\.(ts|tsx|js|jsx)$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['@babel/preset-env', { loose: true }],
                        ["@babel/preset-typescript",
                            {
                                "isTSX": true,
                                "isJSX": true,
                                "allExtensions": true
                            },
                        ],
                        ["@babel/preset-react"]
                    ],
                    "plugins": [
                        [
                          "@babel/plugin-proposal-decorators",
                          {
                            "legacy": true
                          }
                        ],
                        "@babel/plugin-transform-runtime",
                        "@babel/plugin-transform-object-assign",
                        ["@babel/plugin-proposal-class-properties", { "loose": true }],
                        ["@babel/plugin-transform-private-methods", { "loose": true }],
                        ["@babel/plugin-transform-private-property-in-object", { "loose": true }]
                      ],
                },
            }
            ],
        });
        return config;
    },
    framework: {
        name: '@storybook/web-components-webpack5',
        options: {
            builder: { lazyCompilation: true },
        }
    },
    docs: {
        autodocs: 'tag'
    },
    features: {
        storyStoreV7: true,
        legacyDecoratorFileOrder: true,
        breakingChangesV7: true,
    },
};
export default config;

story

import type { Meta, StoryObj } from '@storybook/web-components';
import { CelAccordion } from './cel-accordion';

const meta:Meta = {
  title: 'UI Components/Accordion',
  // component: 'cel-accordion',
  component: CelAccordion,
  // subcomponents: {CelAccordionItem}
  //     design: accordionFigmaDesigns
  // },
  args: { caretRight: true },
  // argTypes: { itemList: { type: 'object', description: 'Determines list of items that the accordion will render.' } },
};
export default meta;

type Story = StoryObj;
export const primary: Story = {
  args: {
    headerLabel: 'random label',
    itemList: mockItemList,
  },
};

系统信息

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.4 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 109.0.5414.87
    Safari: 16.4
  npmPackages:
    @storybook/addon-a11y: ^7.1.0-alpha.41 => 7.1.0-alpha.41 
    @storybook/addon-actions: ^7.1.0-alpha.41 => 7.1.0-alpha.41 
    @storybook/addon-docs: ^7.1.0-alpha.41 => 7.1.0-alpha.41 
    @storybook/addon-essentials: ^7.1.0-alpha.41 => 7.1.0-alpha.41 
    @storybook/addon-links: ^7.1.0-alpha.41 => 7.1.0-alpha.41 
    @storybook/addon-mdx-gfm: ^7.0.24 => 7.0.24 
    @storybook/addon-notes: ^6.0.0-alpha.6 => 6.0.0-alpha.6 
    @storybook/addon-postcss: ^2.0.0 => 2.0.0 
    @storybook/addon-viewport: ^7.1.0-alpha.41 => 7.1.0-alpha.41 
    @storybook/blocks: ^7.0.23 => 7.0.23 
    @storybook/storybook-deployer: ^2.8.16 => 2.8.16 
    @storybook/theming: ^7.1.0-alpha.41 => 7.1.0-alpha.41 
    @storybook/web-components: ^7.1.0-alpha.41 => 7.1.0-alpha.41 
    @storybook/web-components-webpack5: ^7.1.0-alpha.41 => 7.1.0-alpha.41

其他上下文

  • 无响应*
zdwk9cvp

zdwk9cvp1#

对不起,这里回复得有点慢。

据我所知,您需要提供一个字符串,即您的网页组件的名称(就像在HTML中调用它的标签一样,所以如果将其命名为my-component,则字符串为<my-component />)。

至于获取所有不同属性的文档,我们使用Custom Elements Manifest来填充这些字段的创建文档。https://github.com/storybookjs/storybook/blob/next/code/addons/docs/web-components/README.md#installation

相关问题