Tag Archives: swiper Error

[Solved] swiper Error: 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

Leave a reply

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