未找到组件模块 - Storybook - TypeScript

Question

当我运行 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

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;

输入.stories.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），但没有成功。

任何帮助将不胜感激。

Answer 1

事实证明，安装

@types/react-tagsinput

和

react-tagsinput

允许我在仅运行 Storybook 或 NextJS 时使用该模块。虽然这有效，但我不认为这是最好的解决方案。我确信有一个配置可以正确解决这个问题，我只是不完全理解如何解决。