Estoy construyendo una aplicación React. Soy nuevo en React y JS en general.

Intento importar la biblioteca swiperjs a un proyecto React existente:

 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> ) }

Sin embargo, me sale el siguiente 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: '/' }

¿Puede alguien explicar por qué sucede esto?