Storybook Can't Import Swiper Module

Question

I am trying to import Swiper for react in to my application and use it in Storybook.

I have the following import:

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

This works in the React app but not in Storybook, I get the following error:

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

Other React modules have import without a problem. Do I need to change some configuration in Storybook?

Answer 1

Swiper v7+ uses ESM module. To make it work with storybook, you have to update storybook to use webpack5 instead of the default webpack4. Also ensure that your current node version must be equal or higher than 12.20, 14.13 or 16. These are versions that support ESM module.

In my case, I also delete addons @storybook/react line in .storybook/main.js as it still uses webpack4 and raises configuration Validation Error. After that it runs fine.

Full instruction

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

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