javascript - React Storybook - 自定义道具导致“您可能需要适当的加载器来处理此文件类型”消息

Question

我正在尝试将 ReactJS Storybook 用于以下组件-

我为我的组件创建了以下故事文件：

import { SingleProp } from './Single';
import MyBook, {PropData} from './MyBook';
const mybook = () => {
    const className = text('classNameBase', 'className');
    const pr1 : SingleProp = {className: 'class',href:'link',title: 'title',flag : false};
    const pr2 : SingleProp = {className: 'class2',href:'link2',title: 'title2',flag : true};
    const data : PropData = [pr1,pr2];
    return (
        <MyBook className={className} data={data}/>
    )
};

export default mybook;

在单个文件中，它看起来如下：

export interface SingleProp {
    className?: string;
    href?: string;
    title: string;
    flag?: boolean;
}

在“MyBook”tsx 文件中，它看起来像这样：

export type PropData = SingleProp[];
export interface MyBookProps {
    className?: string;
    data: PropData;
}

export default function MyBook({
    className,
    data,
}: MyBookProps): JSX.Element {
    return (
        <div className={`baseClass ${className ? className : ''}`}
        >
            {data.map((pr: SingleProp, index: number) => (
                <AnotherTag key={`pr-${index}`} {...pr} />
            ))}
        </div>
    );
}

但我不断收到以下错误：

Module parse failed: Unexpected token (12:17) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见 https://webpack.js.org/concepts#loaders

const pr1 : SingleProp = {className: 'class',href:'link',title: 'title',flag : false};

const pr2 : SingleProp = {className: 'class2',href:'link2',title: 'title2',flag : true};

常量数据：PropData = [pr1，pr2]；

错误：模块解析失败：意外令牌 (12:17) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见 https://webpack.js.org/concepts#loaders

const pr1 : SingleProp = {className: 'class',href:'link',title: 'title',flag : false};

任何想法我做错了什么？我只是尝试使用其预定义的道具加载 MyBook

标签： javascriptreactjsstorybook