Storybook 在 React、Next.JS、Typescript 项目中找不到组件答案

【问题标题】：Storybook Can't Find Components in React, Next.JS, Typescript ProjectStorybook 在 React、Next.JS、Typescript 项目中找不到组件
【发布时间】：2021-01-04 11:25:55
【问题描述】：

我的 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 结构。

【问题讨论】：

你的结构 repo 是什么？
用 repo 的结构更新了问题
你似乎必须添加 .storybook/main.js 来配置你的 webpack，方法是将 alias 添加到你的 ./src/components
我有一个 .storybook/main.js 文件，其中包含故事和插件的配置。我会在我的“./src/components”中添加一个别名到这个文件吗？在这种情况下我还需要 webpack.config.js 吗？
这是您将别名添加到storybook.js.org/docs/react/configure/… 的方式。你不需要你的 webpack.config.js

标签： reactjs typescript next.js storybook

【解决方案1】：

花了一些时间与故事书战斗）

这是我的 .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"
  ]
}

【讨论】：

【解决方案2】：

我认为您需要的是路径别名。如果您正在处理 typescript 项目，则可以使用 tsconfig.json paths compiler option 声明映射到应用程序中某个绝对路径的别名：

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

官方链接 => typescriptlang.org
在这里你有一个关于这个打字稿功能的很好的解释。 Path aliases with TypeScript in Node.js

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

【讨论】：