Проблемы с модулями ES при использовании Swiper.js в монорепо Nx с Next.js
В моем текущем проекте, в котором используется среда монорепозитория Nx в сочетании с Next.js, я столкнулся с проблемой, связанной с модулями ES. Проблема конкретно связана с библиотекой Swiper.js.
После обновления библиотеки Swiper.js и перехода на использование формата модуля ES возникли трудности при переходе на страницы, где используется эта библиотека. Ошибки следующие:
Error: require() of ES Module lalala… swiper/modules/index.mjs not supported.
Instead change the require of lalala… /swiper/modules/index.mjs to a dynamic import() which is available in all CommonJS modules.
Я нашел один обходной путь — добавить восклицательный знак перед импортом, как показано ниже, чтобы исключить этот модуль из транспиляции. Хоть это и работает, я не считаю это хорошим решением, и это заставляет меня издеваться над всеми этими компонентами в тестах:
import { Swiper, SwiperSlide } from '!swiper/react'
Я также попробовал исключить библиотеку Swiper из процесса транспиляции в конфигурации вебпака, но это не дало положительных результатов (возможно, я сделал это неправильно, учитывая сложности проекта).
Возможно, у кого-то есть идеи по решению этой проблемы с помощью вебпака или других подходов?
Я также подготовил тестовый репозиторий для воспроизведения этой проблемы. Для этого просто клонируйте репозиторий, запустите npm install, а затем nx служат nextjs. После этого нажмите ссылку «ПЕРЕЙДИТЕ О О ПРОЕКТЕ» на открывшейся странице (так как она содержит импорт Swiper.js).
Ссылка на репозиторий: https://github.com/bulletbrand/swiper/
Важно отметить , что эта проблема возникает только при запуске через собственный сервер Next.js. Если вы проверите файл workspace.json в корне монорепо, вы увидите строку"customServerPath": "/src/server.ts", который является бегуном.
Если вам нужна дополнительная информация по этому вопросу, не стесняйтесь спрашивать.