Storybook 无法在 React、Next.JS、Typescript 项目中找到组件

Question

我使用 next.js、typescript 和 React 项目设置了故事书。该项目渲染良好，但故事书中断并给我错误：“找不到模块：错误：无法解析......中的'组件/原子'”似乎组件的路径导致它中断：

import { Element } from 'components/atoms';

但以下有效：

import { Element } from '../../atoms

我有一个 tsconfig.json 文件，其中包含以下内容：

  "compilerOptions": {
    "baseUrl": "src",
    },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
...

我尝试了网上的一些建议，但似乎都没有解决路径问题。我使用以下内容在 .storybook 文件夹中创建了 webpack.config.js，但仍然出现错误。

module.exports = {
 ...
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  }
};

我不想../../在调用文件时使用，而只是能够使用该./components结构。

Answer 1

花了一些时间与 Storybook 战斗）

这是我的 .storybook/main.js 版本，终于成功了：

const path = require("path");

module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.resolve.modules.push(path.resolve(__dirname, '../src'));

    return config;
  },

  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ]
}

Answer 2

我认为您需要的是路径别名。\n如果您正在开发打字稿项目，您可以使用以下方法声明映射到应用程序中某个绝对路径的别名tsconfig.json paths compiler option：

\n

"baseUrl": "./src",\n"paths": {\n  "components/*": ["components/*"],\n  "@/common/*": ["common/*"],\n }\n

\n

\n
• 官方链接 => typescriptlang.org
\n
• 这里有关于 TypeScript 功能的详细解释。\n Node.js 中 TypeScript 的路径别名
\n

\n

请注意，这并不总是那么容易，因为在生产中，您的构建工具链必须将它们转换为正确的路径，因为 tsc 不会\xe2\x80\x99t 这样做。\n幸运的是，nexjts 最近添加了此功能 => https://nextjs .org/docs/advanced-features/module-path-aliases

\n