NextJS Storybook引入storybook-addon-next后启动失败，找不到utils.js

架构老林

2026-8-17

解决storybook-addon-next导致的utils.js路径错误问题

以下是针对你遇到的问题的几种解决方案：

检查版本兼容性
确认storybook-addon-next、@storybook/react、@storybook/builder-webpack5以及你的Next.js版本是否兼容。部分版本不匹配会导致模块解析逻辑异常，建议查看storybook-addon-next的文档确认支持的版本范围，有冲突时升级或降级对应依赖。

修改Webpack解析配置
在main.js中添加webpackFinal配置，强制Webpack优先从当前项目的node_modules中查找模块，避免到父目录搜索：

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],

  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    'storybook-addon-next',
  ],

  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
  webpackFinal: async (config) => {
    // 优先解析当前项目的node_modules
    config.resolve.modules = [
      `${process.cwd()}/node_modules`,
      ...config.resolve.modules,
    ];
    return config;
  },
};

清理缓存后重新构建
执行以下命令清理缓存并重新安装依赖：
```
rm -rf node_modules/.cache
yarn cache clean
yarn install
yarn storybook
```

改用官方Next.js集成（备选方案）
如果上述方法无效，可替换为Storybook官方提供的Next.js集成，兼容性更稳定：

安装官方依赖：
```
yarn add -D @storybook/nextjs
```

修改main.js配置：

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],

  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],

  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  core: {
    builder: '@storybook/builder-webpack5',
  },
};