Storybook导入swiper/react模块提示Module not found如何解决？

你遇到的报错是因为Storybook默认的模块解析规则和你的React应用规则不一致导致的，确实需要调整Storybook相关配置，按以下步骤操作即可修复：

• 首先确认你已经正确安装了Swiper v7及以上版本，依赖无缺失。
• 如果你使用Webpack版本的Storybook，修改.storybook/main.js配置文件，新增webpack解析规则：

module.exports = {
  // 保留你原有的stories、addons等配置不变
  webpackFinal: async (config) => {
    // 配置alias直接映射swiper/react的实际路径
    config.resolve.alias = {
      ...config.resolve.alias,
      'swiper/react': require.resolve('swiper/react')
    };
    // 确保解析后缀覆盖你项目使用的文件类型
    config.resolve.extensions = [...config.resolve.extensions, '.js', '.jsx', '.ts', '.tsx'];
    return config;
  }
}

• 如果你使用Vite版本的Storybook，修改.storybook/vite.config.js配置：

import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      'swiper/react': require.resolve('swiper/react')
    }
  }
})

• 配置修改完成后重启Storybook服务即可生效。如果修改后仍然报错，可以删除node_modules文件夹和项目lock文件（package-lock.json/yarn.lock/pnpm-lock.yaml）后重新安装依赖，清除缓存影响。

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