swiperjs相关问题

[xccjk]

低版本node与swiper版本导致的错误

最近在nextjs项目中使用swiper，版本信息如下：

node版本12.9.1

"next": "11.1.0",
"swiper": "7.4.1",

项目打包后报错：

(node:159) ExperimentalWarning: The ESM module loader is experimental.

> Build error occurred
file:///shark/web-book/node_modules/swiper/react/use-isomorphic-layout-effect.js:1
import { useEffect, useLayoutEffect } from 'react';
         ^^^^^^^^^
SyntaxError: The requested module 'react' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'react';
const { useEffect, useLayoutEffect } = pkg;
    at ModuleJob._instantiate (internal/modules/esm/module_job.js:97:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:143:20)
    at async Loader.import (internal/modules/esm/loader.js:182:24) {
  type: 'SyntaxError'
}

重点错误信息The requested module 'react' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export

意思就是打包环境还不支持EMS包

解决方案：

• 升级node版本到14.x
• 把swiper版本降到6.x版本

资料

[xccjk]

react18中swiper导致的报错

在nextjs中使用swiperjs，当升级react版本到18.x后，报错：

Cannot read properties of undefined (reading 'wrapperClass')

当前版本信息：

"next": "^12.1.7-canary.30",
"react": "^18.2.0-next-e531a4a62-20220505",
"react-dom": "^18.2.0-next-e531a4a62-20220505",
"swiper": "^7.4.1"

解决方案：通过设置next.config.js中的reactStrictMode : false

或者：

升级swiper到最新版本

"next": "^12.1.7-canary.30",
"react": "^18.2.0-next-e531a4a62-20220505",
"react-dom": "^18.2.0-next-e531a4a62-20220505",
"swiper": "^8.2.2"

关联错误信息