使用带有TypeScript的Storybook时出现“未找到模块”或“导入路径不能以tsx结尾”

y0u0uwnf  于 2023-01-21  发布在  TypeScript
关注(0)|答案(1)|浏览(181)

我正在编写一个使用另一个组件的组件,因此我编写了
import { Text } from "../Text/Text"
在文件/src/stories/TextArea/TextArea.tsx中。
但是,这会产生误差
Module not found: Can't resolve '../Text/Text' in '/Users/username/project/src/stories/TextArea'
将import语句更改为
import { Text } from "../Text/Text.tsx"
使它工作得很好。相反,短绒抱怨说:
An import path cannot end with a '.tsx' extension. Consider importing '../Text/Text.js' instead.ts(2691)
据我所知,.tsx结尾在TypeScript中是被禁止的,因此重新配置linter似乎不是最好的选择。
显然,导入Text.js是不起作用的,因为它不存在。故事书应该是用TypeScript开箱即用的,所以我不确定我必须做什么。
在我用作故事的.mdx文件中(如Text.stories.mdx),包含.tsx的导入被接受,没有任何不正常的抱怨,删除扩展会产生类似的Module not found错误。
该项目是使用create-react-app创建的,运行Storybook 6.5.15。

z2acfund

z2acfund1#

您的导入import { Text } from "../Text/Text"应该工作正常。

确保您使用的是最新版本的Storybook - 6.5.15。

...
我尝试重现您的问题,但失败了。我没有收到相同的错误,导入工作正常。让我描述一下我采取的步骤:
我使用npx storybook init --type react在我的项目中安装了Storybook。这安装了Storybook 6.5.15 for React
我在./project/src/Button.tsx中创建了一个简单的组件

import React from 'react'

export const Button = () => {
  return <div>MY BUTTON</div>
}

我在./project/stories/Button.stories.jsx中创建了一个简单的故事,如下所示:

import React from 'react';

import { Button } from '../src/Button';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Example/Button',
  component: Button,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});

// More on args: https://storybook.js.org/docs/react/writing-stories/args
Primary.args = {
  primary: true,
  label: 'Button',
};

没有任何问题。导入工作正常。如果这对您没有帮助,请告诉我们有关您的项目设置的更多信息(例如,您是否使用Create-react-app)等。因此,此问题更容易重现。

相关问题