Storybook无法解析NX共享组件@ouravesome-app/ui的问题求助

看起来你在monorepo结构下遇到了Storybook无法解析@ouravesome-app/ui包的问题，从报错信息来看，webpack一直在Storybook的node_modules里找这个包，而不是指向你项目里的libs/ui目录。下面是几个针对性的解决方案，你可以逐一尝试：

1. 先确认Monorepo的包管理配置 #

首先要确保你的包管理器（Yarn/NPM）能识别到libs/ui作为一个本地工作区包：

• 检查根目录的package.json，确认workspaces字段包含了apps和libs：

  {
    "workspaces": [
      "apps/*",
      "libs/*"
    ]
  }
  

• 然后去libs/ui目录下，确保它有自己的package.json，并且name字段严格是@ouravesome-app/ui，同时配置好入口文件：

  {
    "name": "@ouravesome-app/ui",
    "main": "src/index.ts", // 如果是TS项目，直接指向源码；如果编译过就指向dist文件
    "types": "src/index.ts" // 给TypeScript用的类型入口
  }
  

• 最后在根目录执行yarn install或者npm install，让包管理器在各个子包之间建立软链接，这样@ouravesome-app/ui就会被识别为本地包，而不是去远程下载。

2. 给Storybook的Webpack添加别名 #

如果包管理配置没问题，但Storybook的Webpack还是没找到路径，那就手动在Storybook配置里加别名：
找到Storybook的配置文件（一般是apps/storybook/.storybook/main.js），修改webpackFinal配置：

const path = require('path');

module.exports = {
  // 其他配置...
  webpackFinal: async (config) => {
    // 扩展webpack的别名配置
    config.resolve.alias = {
      ...config.resolve.alias,
      '@ouravesome-app/ui': path.resolve(__dirname, '../../libs/ui/src'),
    };
    return config;
  },
};

这里的路径要根据你的.storybook目录位置调整，确保指向libs/ui/src的正确相对路径。

3. 确认UI组件的导出是否正确 #

别忽略最基础的检查：

• 确保libs/ui/src/components/index.ts里正确导出了HeaderLevelOne：

  export { HeaderLevelOne } from './HeaderLevelOne';
  

• 同时libs/ui/src/index.ts（如果存在的话）要把components里的内容重新导出：

  export * from './components';
  

这样你通过@ouravesome-app/ui导入的时候才能拿到这个组件。

4. 如果是TypeScript项目，检查TS配置 #

如果你的项目用了TypeScript，还要确认根目录或者Storybook的tsconfig.json里有路径别名配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@ouravesome-app/ui": ["libs/ui/src"]
    }
  }
}

这样TypeScript编译器也能识别这个导入路径，不会报红。

一般来说，先排查第一和第三个步骤，大部分monorepo的导入问题都是workspace配置或者导出不正确导致的。如果还是不行，再尝试添加Webpack别名。

内容的提问来源于stack exchange，提问作者Lukáš Šálek