使用create-react-app遇react-toastify导入cloneElement错误求助

报错原因 #

react-toastify@9.x版本采用ES模块规范导出内容，但旧版本create-react-app的webpack配置对ES模块的处理存在兼容问题，无法正确识别命名导出，仅能识别默认导出，从而触发该报错。

解决方案 #

• 降级react-toastify到兼容版本
  执行以下命令将版本降级至^8.2.0（经测试该版本与create-react-app兼容良好）：

  npm install react-toastify@8.2.0 --save
  

  若使用yarn：

  yarn add react-toastify@8.2.0
  

• 修改导入方式
  将原命名导入改为默认导入后解构，示例如下：
  原导入代码：

  import { ToastContainer, toast, cloneElement } from 'react-toastify';
  

  修改为：

  import ReactToastify from 'react-toastify';
  const { ToastContainer, toast, cloneElement } = ReactToastify;
  

  注意保留样式文件的导入：

  import 'react-toastify/dist/ReactToastify.css';
  

• 更新react-scripts版本
  若使用的create-react-app版本较旧，尝试更新react-scripts到最新版，以优化ES模块支持：

  npm install react-scripts@latest --save
  

  若使用yarn：

  yarn add react-scripts@latest
  

内容的提问来源于stack exchange，提问作者pranoy sarker