我正在编写一个使用另一个组件的组件,因此我编写了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。
1条答案
按热度按时间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
中创建了一个简单的组件我在
./project/stories/Button.stories.jsx
中创建了一个简单的故事,如下所示:没有任何问题。导入工作正常。如果这对您没有帮助,请告诉我们有关您的项目设置的更多信息(例如,您是否使用Create-react-app)等。因此,此问题更容易重现。