Сборник Рассказов Не может Импортировать Модуль Swiper

#reactjs #next.js #storybook #swiperjs

Вопрос:

Я пытаюсь импортировать Swiper для react в свое приложение и использовать его в сборнике рассказов.

У меня есть следующий импорт:

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

Это работает в приложении React, но не в сборнике рассказов, я получаю следующую ошибку:

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

Другие модули React импортируются без проблем. Нужно ли мне изменить какую-то конфигурацию в Сборнике рассказов?

1. Мы можем решить эту проблему? У меня та же проблема, сборник рассказов, кажется, думает, что swiper/react это модуль, в то время swiper как это модуль и react папка внутри модуля

2. я думаю, вам придется использовать Swiper V6

Ответ №1:

Swiper v7 использует модуль ESM. Чтобы заставить его работать с storybook, вам необходимо обновить storybook, чтобы использовать webpack5 вместо webpack4 по умолчанию. Также убедитесь, что ваша текущая версия узла должна быть равна или выше 12.20, 14.13 или 16. Это версии, поддерживающие модуль ESM.

В моем случае я также удаляю дополнения в строке @storybook/react .storybook/main.js поскольку он все еще использует webpack4 и вызывает ошибку проверки конфигурации. После этого все идет нормально.

Полная инструкция