Storybook 无法导入 Swiper 模块

Posted 2023-02-19

【中文标题】Storybook 无法导入 Swiper 模块

【英文标题】：Storybook Can't Import Swiper Module

【发布时间】：2021-11-20 17:21:11

【问题描述】：

我正在尝试导入 Swiper 以响应我的应用程序并在 Storybook 中使用它。

我有以下导入：

import  Swiper, SwiperSlide  from 'swiper/react';

这在 React 应用程序中有效，但在 Storybook 中无效，我收到以下错误：

ModuleNotFoundError: Module not found: Error: Can't resolve 'swiper/react'

其他 React 模块可以毫无问题地导入。我需要更改 Storybook 中的某些配置吗？

【问题讨论】：

我们能解决这个问题吗？我有同样的问题，storybook 似乎认为swiper/react 是模块，而swiper 是模块，react 是模块内的文件夹

我猜你必须使用 Swiper V6

【参考方案1】：

Swiper v7+ 使用 ESM 模块。要使其与故事书一起使用，您必须更新故事书以使用 webpack5 而不是默认的 webpack4。还要确保您当前的节点版本必须等于或高于 12.20、14.13 或 16。这些是支持 ESM 模块的版本。

就我而言，我还删除了 .storybook/main.js 中的插件 @storybook/react 行，因为它仍然使用 webpack4 并引发配置验证错误。之后就可以正常运行了。

完整说明

https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade

https://storybook.js.org/blog/storybook-for-webpack-5/

【讨论】：

更新到webpack5后成功，谢谢。