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:

• [Solved] react18 swiper Error: Cannot read properties of undefined (reading ‘wrapperClass’)
• NPM start project error: cannot find module ‘webpack’ problem solution
• [Solved] NRM Error: error code: ‘err’_INVALID_ARG_Type ‘
• Taro Error: chunk common [mini-css-extract-plugin] Conflicting order between: ……
• Vue require Error: node_modules/babel-loader/lib
• [Solved] Error: Cannot find module ‘webpack-cli/package.json‘
• 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
• [Solved] error [email protected]: The engine “node” is incompatible with this module.
• How to Solve Import antd Error: Module build failed
• [Solved] webpack.config.js configuration encountered Error: Cannot find module’@babel/core’&&Cannot find module’@babel/plugin-transform-react-jsx’
• How to Fix Node SASS Error in Vue + webpack project after nodejs upgrade
• Angular6 rxjs start error in node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ‘;’ expected.
• How to Solve Error: Module did not self-register
• Attempted import error: ‘mobx-react‘ does not contain a default export (imported as ‘observer‘).
• [Solved] npm Error: Error: Cannot find module ‘postcss-loader‘
• Error: uncaughtexception: cannot find module ‘internal / util / types’
• Some problems encountered in the initial construction of Ant Design Pro project, such as cross Env, webpack and so on
• ValueError: Input 0 of node import/save/Assign was passed float from import/beta1_power:0 incompatib
• The use of vue-echarts and compilation error solutions