无法从非 EcmaScript 模块导入命名导出“Children”（仅提供默认导出）

Question

我在reactjs中从framer-motion模块进行命名导入时遇到此错误。Obs：我没有使用 webpack。

import { Fragment } from "react";

import classes from "./Hero.module.css";

import { motion } from "framer-motion";

import Header from "../header/Header";

export default function Hero() {
  return (
    <Fragment>
      <Header />
      <section className={classes.banner}>
        <img src="https://i.imgur.com/1arVXy2.jpg" />
        <motion.h1 className={classes.slogan}>Produtos de alta performance</motion.h1>
        <div className={classes['see-more']}>
          <span>Veja mais</span>
        </div>
      </section>
    </Fragment>
  );
}