解决es模块的要求

Question

最近，我使用swiperjs在我的remix应用程序中添加了一个旋转木马。它给了我一个错误：

​

我在如何解决这一问题上寻找不同的解决办法，但都没有奏效。我尝试过的解决办法是：

在package.json

• adding remix.config.js

中

• 向"type":"module"添加"type":"module"

下面是我的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/",
};

这是我使用的代码：

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>

有谁可以帮我？

Answer 1

这个问题的答案是下一个：{ serverDependenciesToBundle: ['swiper', 'swiper/react', 'swiper/react/swiper-react.js', 'ssr-window','ssr-window/ssr-window.esm.js','dom7'], } --这是因为您需要使用esm推送所有库。