Storybook无法导入Swiper模块

Question

我正在尝试将Swiper for react导入到我的应用程序中，并在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模块。要使其与storybook一起工作，您必须更新storybook以使用webpack5而不是默认的webpack4。另外，请确保您当前的节点版本必须等于或高于12.20、14.13或16。这些版本支持ESM模块。

在我的例子中，我还删除了.storybook/main.js中的addons @storybook/react行，因为它仍然使用webpack4并引发配置验证错误。在那之后，它运行得很好。

全指令

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

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