提问人:SReca 提问时间:11/14/2023 更新时间:11/17/2023 访问量:14
未找到组件模块 - Storybook - TypeScript
Component module not found - Storybook - TypeScript
问:
当我运行 Storybook 时,出现以下错误:
ERROR in ./components/atoms/input/input.tsx 14:0-40
Module not found: Error: Can't resolve 'react-tagsinput' in '...'
为了提供我的环境的上下文,以下是我的设置:
目录
root
|.storybook
|-main.ts
|-components
|-atoms
|-input
|-input.tsx
|-input.stories.ts
|-node_modules
main.ts(英语:main.ts)
import type { StorybookConfig } from "@storybook/nextjs";
const config: StorybookConfig = {
stories: ["../components/**/*.mdx", "../components/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-onboarding",
"@storybook/addon-interactions",
],
framework: {
name: "@storybook/nextjs",
options: {},
},
docs: {
autodocs: "tag",
}
};
export default config;
input.stories.ts(输入.故事.ts)
import type { Meta, StoryObj } from '@storybook/react';
import Input from './input';
// Rest of code here...
输入.tsx
import React, { InputHTMLAttributes } from "react";
import TagsInput from 'react-tagsinput';
// Rest of code here...
package.json
{
"dependencies": {
"@types/react-tagsinput": "^3.20.2",
"axios": "^1.6.1",
"next": "14.0.1",
"react": "^18",
"react-dom": "^18",
"redux": "^4.2.1",
"redux-logger": "^3.0.6",
"swr": "^2.2.4"
},
"devDependencies": {
"@storybook/addon-essentials": "^7.5.3",
"@storybook/addon-interactions": "^7.5.3",
"@storybook/addon-links": "^7.5.3",
"@storybook/addon-onboarding": "^1.0.8",
"@storybook/blocks": "^7.5.3",
"@storybook/nextjs": "^7.5.3",
"@storybook/react": "^7.5.3",
"@storybook/testing-library": "^0.2.2",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.0.1",
"eslint-plugin-storybook": "^0.6.15",
"sass": "^1.69.5",
"storybook": "^7.5.3",
"style-dictionary": "^3.9.0",
"typescript": "^5"
}
}
我尝试遵循 Storybook 网站(https://storybook.js.org/docs/react/builders/webpack#typescript-module-resolution)中的一些建议,但没有成功。
任何帮助将不胜感激。
答:
0赞
SReca
11/17/2023
#1
事实证明,安装两者并允许我在仅运行 Storybook 或 NextJS 时使用该模块。 需要在用 TypeScript 编写的输入组件中使用它。虽然这有效,但我不认为这是最好的解决方案。我确信有一个配置可以正确解决此问题,我只是不完全了解如何解决。@types/react-tagsinput
react-tagsinput
@types/react-tagsinput
评论