使用 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。