使用react-toastify会报错 non EcmaScript module

最近在用React写一个页面，想加入一个Message通知弹窗，找了很久，最终选用了react-toastify。主要是他配置比较简单，所以按照他们的示例进行了配置。

 import React from 'react';

  import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  
  function App(){
    const notify = () => toast("Wow so easy!");

    return (
      <div>
        <button onClick={notify}>Notify!</button>
        <ToastContainer />
      </div>
    );
  }

然后运行

Failed to compile.

./node_modules/react-toastify/dist/react-toastify.esm.mjs
Can't import the named export 'cloneElement' from non EcmaScript module (only default export is available)
Compiling...

就报错了，找了半天的原因，貌似是因为最新版本的React不支持非ES语法的模块

​

最终就采取其他的方式解决一下吧
首先 安装 react-app-rewired

npm install --save-dev react-app-rewired

然后在 package.json中修改 react-scripts 为 react-app-rewired

 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

然后在根目录创建一个 config-overrides.js

 module.exports = function override(webpackConfig) {
  webpackConfig.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto"
  });

  return webpackConfig;
}

然后正常的 npm start 就可以了