Errors caused by lower versions of node and swiper versions

Recently, swiper is used in the nextjs project, and the version information is as follows:

node version12.9.1

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

After the project is packaged, an error is reported:

(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'
}

key error messageThe 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

It means that the packaging environment does not yet support EMS packages.

solution:

• Upgrade node version to 14.x
• Downgrade swiper version to 6.x version

Read More:

• Attempted import error: ‘mobx-react‘ does not contain a default export (imported as ‘observer‘).
• [Solved] Vscode Error: “export ‘default‘ (imported as ‘VueRouter‘) was not found in ‘vue-router‘
• [Solved] react18 swiper Error: Cannot read properties of undefined (reading ‘wrapperClass’)
• Echars 5.0 Import Error: “export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’
• React Hook “useState“ is called in function “xxx“ which is neither a React function component or
• Taro Use React Hooks Error: TypeError: Object(…) is not a function
• It can be opened with localhost, but not with IP address. The request host name is invalid
• Chart.js Error: “Canvas is already in use. Chart …must be destroyed before the canvas can be reused”
• This limit can be set by changing the [search.max_open_scroll_context] setting
• [Solved] webpack.config.js configuration encountered Error: Cannot find module’@babel/core’&&Cannot find module’@babel/plugin-transform-react-jsx’
• [Solved] react Error: Can‘t perform a React state update on an unmounted component
• Cmake Setting Support C++11 This support must be enabled with the -std=c++11 or -std=gnu++11 compiler options
• Uncaught (in promise) Error: Delete success at __webpack_exports__.default 405 error
• Module not found: Error: Can‘t resolve ‘sass-loader‘
• Angular6 rxjs start error in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ‘;’ expected.
• The showdialog() method in thread/threading. Timer/task reported an error: “before ole can be called, the current thread must be set to single thread unit (STA) mode.”
• An error was reported when Maven package was running the packaged jar package: there is no main list attribute in xxx.jar, which can be solved by configuring Maven plugin
• The imported project “c:\Microsoft.Cpp.Default.props” was not found
• [Solved] Caused by: java.sql.SQLException: Connections could not be acquired from the underlying database!