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

Posted 2023-02-19

【中文标题】Storybook 在 React、Next.JS、Typescript 项目中找不到组件

【英文标题】：Storybook Can't Find Components in React, Next.JS, Typescript Project

【发布时间】：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

【参考方案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