Remix项目集成SwiperJS遇ES模块错误，求解决方案

近期在Remix应用中使用SwiperJS集成轮播组件时，遇到了ES模块相关错误，错误截图如下：

已尝试以下修复方案但均无效：

• 在package.json中添加"type":"module"
• 在remix.config.js中配置serverDependenciesToBundle

我的remix.config.js配置如下：

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
module.exports = {
  serverDependenciesToBundle: ['swiper', 'swiper/react'],
  serverBuildTarget: 'netlify',
  server: './server.js',
  ignoredRouteFiles: ['**/.*'],
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // serverBuildPath: ".netlify/functions-internal/server.js",
  // publicPath: "/build/",
};

我使用的Swiper组件代码如下：

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

<Swiper
  spaceBetween={50}
  slidesPerView={3}
  onSlideChange={() => console.log('slide change')}
  onSwiper={(swiper) => console.log(swiper)}>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
  <SwiperSlide>Slide 4</SwiperSlide>
</Swiper>

恳请各位帮忙解决该问题！

内容的提问来源于stack exchange，提问作者Lode