使用swiperjs React时出错-‘请求的模块'react’应为CommonJS`类型

Question

我正在构建一个React应用程序。我对React和JS都是新手。

我尝试将swiperjs库导入到现有的React项目中：

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

但是，我得到以下错误：

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: '/'
}

有人能解释一下为什么会发生这样的事情吗？

Answer 1

您的开发环境不支持ESM包。检查您的Nodjs版本。Nodjs 14及以上版本支持ESM导入。更新nodejs版本或使用Swiper 6。