Error using swiperjs React - `The requested module 'react' is expected to be of type CommonJS`

Question

I am building a React application. I am new to React and JS in general.

I try importing the swiperjs library into an existing React project:

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

function HomeBanner(props) {

    return (
        <div >
            <div>
                <img src="img/slider/home-3/home-banner/1.jpg" alt="" />
                <div className="">
                    <h5>Mega Sale Nov 2019</h5>
                    <h3>
                        Double Combo With <br />
                        The Body Shop
                    </h3>
                    <p>Sale up to <strong>50% Off </strong></p>
                    <a className="ps-btn" href="#">Shop Now</a>
                </div>
            </div>
            <div>
                <img src="img/slider/home-3/home-banner/2.jpg" alt="" />
                <div className="">
                    <h5>Mega Sale Nov 2017</h5>
                    <h3>
                        IKEA Minimalist <br />
                        Otoman
                    </h3>
                    <p>Discount <strong>50% Off </strong></p>
                    <a className="ps-btn" href="#">Shop Now</a>
                </div>
            </div>
        </div>
    )
}

However, I get the following error:

error - file:///User/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:96:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:134:20)
    at async Loader.import (internal/modules/esm/loader.js:179:24) {
  page: '/'
}

Can someone please explain why this is happening?

Answer 1

Your development environment does not support ESM packages. Check your version of Node by running node -v. Node 14 and above supports ESM import. Update the Node version or use Swiper 6.