Next.js集成Storybook时出现Cannot read properties of undefined(reading 'name')错误

问题根源及修复步骤 #

1. 移除main.js中的无效顶层module配置

Storybook的main.js不支持直接设置顶层module字段，你之前的写法会覆盖默认Webpack配置，导致@storybook/addon-actions等插件的内部代码无法被正确编译，进而触发读取undefined.name的错误。

修改后的main.js：

const path = require('path');

module.exports = {
  stories: [
    '../**/*.stories.mdx',
    '../**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-scss',
    '@storybook/addon-interactions',
  ],
  framework: '@storybook/react',
  core: { builder: '@storybook/builder-webpack5' },
  webpackFinal: async (config) => {
    // 追加自定义规则，而非直接覆盖默认配置
    config.module.rules.push(
      { 
        test: /\.scss$/, 
        use: ['style-loader', 'css-loader?url=false', 'sass-loader'], 
        include: path.resolve(__dirname, '../') 
      },
      { 
        test: /\.tsx?$/, 
        use: 'ts-loader', 
        exclude: /node_modules/ 
      }
    );
    // 配置别名
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, '../'),
    };
    return config;
  },
};

2. 确保路由插件版本兼容

storybook-addon-next-router与Storybook版本不匹配时，可能会导致Router上下文传递异常，间接引发该错误。执行以下命令更新插件：

npm update storybook-addon-next-router
# 或 yarn 用户执行：
yarn upgrade storybook-addon-next-router

3. 优化Next.js Image组件的处理（可选）

当前的Image组件重写方式可以简化，同时避免潜在的上下文冲突：
修改preview.js中的Image处理部分：

import NextImage from 'next/image';

// 直接包装组件，无需修改全局default属性
const UnoptimizedNextImage = (props) => (
  <NextImage {...props} unoptimized />
);

// 若使用Storybook官方Next.js插件，可通过参数统一配置
export const parameters = {
  // ...其他参数
  nextjs: {
    image: { unoptimized: true },
  },
};

4. 清理缓存并重启Storybook

缓存异常可能导致旧配置残留，执行以下命令清理后重启：

npx storybook --no-manager-cache
# 或手动删除缓存目录
rm -rf node_modules/.cache/storybook

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