Storybook启动报错module not found无法解析swiper/css问题求助

算力阿峰

2026-10-6

Storybook无法识别swiper/css模块的解决方案

根因

Storybook默认使用独立的构建配置，不会自动继承Next.js项目的模块解析规则。你遇到的报错是因为Swiper v8+使用package.json的exports字段声明CSS入口，而Storybook的默认解析规则没有适配该导出方式，导致无法定位到对应的CSS文件。

解决步骤

优先升级Storybook到7.x及以上版本，7.x版本默认适配了exports字段解析规则，大部分情况下可以直接兼容该导入写法。
如果你使用Storybook 6.x且暂时无法升级，在.storybook/main.js中添加如下webpackFinal配置：

module.exports = {
  // 保留你现有的其他配置项
  webpackFinal: async (config) => {
    config.resolve = {
      ...config.resolve,
      // 优先从项目根目录的node_modules查找依赖
      modules: [...config.resolve.modules, `${process.cwd()}/node_modules`],
      // 增加.css后缀的自动识别
      extensions: [...config.resolve.extensions, '.css'],
      // 关闭完全指定路径要求，兼容exports字段导出逻辑
      fullySpecified: false,
    }
    return config
  }
}

如果你已经接入了@storybook/nextjs框架适配包，直接在framework配置中加入swiper的转译配置即可：

module.exports = {
  framework: {
    name: '@storybook/nextjs',
    options: {
      nextConfig: {
        transpilePackages: ['swiper'],
      },
    },
  },
  // 保留你现有的其他配置项
}