Storybook 无法导入 Swiper 模块

Question

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

我有以下导入：

import { Swiper, SwiperSlide } from 'swiper/react';

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

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

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

Answer 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/