Next.js+Material UI 5环境下Storybook热重载报错问题

页面刷新时组件可正常加载；使用Typography组件并编辑文本时热重载功能运行正常，但将组件从Typography替换为Button时触发报错。已尝试使用storybook-addon-next-material-ui插件，问题仍未解决。

报错信息 #

index.js:56 Unexpected error while loading ./pages/test.stories.tsx: Cannot read properties of undefined (reading 'call')
TypeError: Cannot read properties of undefined (reading 'call')
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:339:21)
    at ./components/test-component.tsx (http://localhost:6006/main.436c782e1c77c7940bf8.hot-update.js:14:71)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:339:21)
    at ./stories/pages/test.stories.tsx (http://localhost:6006/main.iframe.bundle.js:44:84)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:339:21)
    at webpackContext (http://localhost:6006/main.iframe.bundle.js:118:9)
    at http://localhost:6006/vendors-node_modules_mui_material_Button_Button_js-node_modules_storybook_addon-actions_previ-68b32d.iframe.bundle.js:14244:29

相关配置及代码 #

.storybook/main.js #

module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    'storybook-addon-next',
  ],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
};

test.stories.tsx #

import { TestComponent } from '../../components/test-component';

export default {
  title: 'Pages',
  component: TestComponent,
};

export const TestScreen = () => <TestComponent />;

test-component.tsx #

import { Button, Typography } from '@mui/material';
import React from 'react';

export const TestComponent = () => {
  return <Typography>TestComponent</Typography>;
};

1. 校验依赖版本兼容性
   锁定@mui/material、@storybook/react和webpack的兼容版本，示例package.json依赖配置：

{
  "@mui/material": "^5.14.0",
  "@storybook/react": "^6.5.16",
  "webpack": "^5.88.0"
}

修改后执行npm install重新安装依赖。

2. 配置Storybook Webpack解析规则
   在.storybook/main.js中添加webpackFinal配置，指定MUI的ES模块解析路径：

module.exports = {
  // 原有配置保持不变...
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@mui/material': '@mui/material/esm',
      '@mui/icons-material': '@mui/icons-material/esm',
    };
    return config;
  },
};

3. 清除缓存并重启服务
   执行以下命令清理Storybook缓存，避免热重载时的缓存冲突：

rm -rf node_modules/.cache/storybook
npm run storybook -- --no-manager-cache

4. 替换第三方插件为官方MUI集成
   移除storybook-addon-next-material-ui，改用Storybook官方的样式插件：

• 安装依赖：

npm install @storybook/addon-styling --save-dev

• 更新.storybook/main.js的addons列表：

addons: [
  '@storybook/addon-links',
  '@storybook/addon-essentials',
  'storybook-addon-next',
  '@storybook/addon-styling' // 添加这一行
],

• 创建.storybook/preview.js配置MUI主题：

import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

const theme = createTheme();

export const decorators = [
  (Story) => (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Story />
    </ThemeProvider>
  ),
];

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