Swiper.js反应编译失败

Question

我正在尝试更新swiper.js库

我用的是6.8.2，

现在我想把它升级到一个更新的版本7.4.1

我的应用程序是用React和Node编写的(我不使用Next.js)和Node版本: v14.11.0

下面是我的组件代码的样子

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

const CustomView = () => {

  return (
      <Swiper>
      </Swiper>
  )
}


export default CustomView

当我运行它时，我在终端中得到以下错误

"message":"Must use import to load ES Module: /Users/Projects/ReactStarter/node_modules/swiper/react/swiper-react.js\nrequire() of ES modules is not supported.

然后，我将Import更改为：

import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js'

在终端错误中打印：

"message":"Package subpath './react/swiper-react.js' is not defined by \"exports\"

有什么办法可以绕过这个问题吗?因为我使用的是webpack，所以也许我可以忽略它或者别的什么

Answer 1

你能试一下候机楼吗？

1. npm cache clean --force
2. npm rm -rf node_modules

并重新安装3. npm i

Answer 2

看起来，next.js的一个问题是，一个临时修复程序将将experimental.esmExternals更改为next.config.js中的loose，并跟踪这条线以获得有关此问题的更多更新。

module.exports = {
  experimental: {
    esmExternals: "loose",
  }
};

Answer 3

更新库可能不是一个选项。考虑到您使用的是React 18. https://github.com/nolimits4web/swiper/issues/4871