Next.js 13 单仓独立Storybook配置及模块导入问题排查

问题根源 #

组件内部使用的src/components/text这类Next.js绝对导入路径，在独立的Storybook环境中无法被正确解析；同时你的myWebApp/package.json配置存在错误，且Storybook的webpack配置未处理跨目录的路径解析逻辑。

分步解决方案 #

1. 修正myWebApp/package.json的main字段 #

原配置的main值无效，需要指向实际的代码入口文件（比如src/index.js，若没有可创建一个组件导出入口）：

{
    "name": "@monorepo/myWebApp",
    "main": "./src/index.js",
    "module": "./src/index.js" // 可选，用于支持ES模块导入
}

若未创建src/index.js，可以新增该文件并导出需要的组件：

// myWebApp/src/index.js
export { default as Button } from './components/button';
export { default as Text } from './components/text';

2. 修复storybook/next.config.js的拼写错误 #

你当前配置里的module.export是语法错误，必须改为module.exports：

const withTM = require('next-transpile-module')(['@monorepo/myWebApp']);
module.exports = withTM();

3. 配置Storybook的webpack解析规则 #

在.storybook/main.js中添加webpack配置，让Storybook能识别src/开头的绝对导入，并正确转译myWebApp的代码：

const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  // 集成Next.js框架（Storybook 6.4+版本推荐）
  framework: '@storybook/nextjs',
  webpackFinal: async (config) => {
    // 添加路径别名，解析myWebApp中的src绝对导入
    config.resolve.alias = {
      ...config.resolve.alias,
      'src': path.resolve(__dirname, '../../myWebApp/src'),
      '@monorepo/myWebApp': path.resolve(__dirname, '../../myWebApp')
    };

    // 确保myWebApp的代码被转译处理
    config.module.rules.push({
      test: /\.(js|jsx|ts|tsx)$/,
      include: path.resolve(__dirname, '../../myWebApp'),
      use: ['babel-loader'],
    });

    return config;
  },
};

4. 优化组件导入方式 #

完成上述配置后，你在stories中可以直接通过包名导入组件（若已在myWebApp/src/index.js中导出）：

import { Button } from '@monorepo/myWebApp';

也可以保留原导入路径：

import Button from '@monorepo/myWebApp/src/components/button';

额外说明 #

• 不需要添加Next.js的page文件，Storybook可以直接渲染独立组件，路由不是问题的根源。
• 若使用Storybook 7.x版本，framework配置会略有差异，但核心的webpack路径解析规则逻辑保持一致。

内容的提问来源于stack exchange，提问作者hereToLearn