webpack 组件模块未找到- Storybook - TypeScript

ttp71kqs  于 7个月前  发布在  Webpack
关注(0)|答案(1)|浏览(75)

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

input.stories.ts

import type { Meta, StoryObj } from '@storybook/react';
import Input from './input';

// Rest of code here...

input.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)中的一些建议,但没有成功。
如有任何帮助,我们将不胜感激。

ej83mcc0

ej83mcc01#

事实证明,安装@types/react-tagsinputreact-tagsinput可以让我在运行Storybook或NextJS时使用该模块。在用TypeScript编写的输入组件中使用它需要@types/react-tagsinput。虽然这可以工作,但我不相信这是最好的解决方案。我相信有一个配置可以正确解决这个问题,我只是不完全理解如何解决。

相关问题