React引入react-toastify编译报错：无法从非ESM模块导入cloneElement

问题场景 #

在React项目中引入react-toastify依赖时，使用如下导入语句：

import { ToastContainer, toast } from 'react-toastify'; 
import 'react-toastify/dist/ReactToastify.css';

移除上述toastify相关导入时项目可正常运行，添加导入后触发编译失败，报错信息如下：

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)

报错本质：当前项目使用的构建工具（多为4.x及以下版本的webpack / 旧版react-scripts）无法正确识别.mjs后缀的ESM模块文件，不支持从该类未做适配的模块中读取命名导出，仅能识别默认导出。

修复方案 #

按实现成本从低到高排序：

• 方案1：降级react-toastify到兼容旧构建工具的版本
  高版本react-toastify输出的.mjs产物和旧版构建工具存在兼容问题，直接安装v8.x系列稳定兼容版本即可，不需要修改任何业务代码：

  # 卸载当前版本
  npm uninstall react-toastify
  # 安装兼容版本
  npm install react-toastify@8.2.0
  

  安装完成后重启开发服务/重新构建即可正常运行。
• 方案2：调整webpack配置适配.mjs模块
  如果不想降级依赖版本，可修改构建配置开启对.mjs模块的兼容支持。自定义webpack配置的项目直接在配置文件的module.rules中添加如下规则：

  module: {
    rules: [
      {
        test: /\.m?js$/,
        resolve: {
          fullySpecified: false
        }
      },
      // 保留原有其他loader规则
    ]
  }
  

  如果是使用create-react-app创建且未eject配置的项目，可通过craco、react-app-rewired等配置注入工具添加上述规则，不需要eject暴露原生配置。
• 方案3：手动指定导入CommonJS格式产物
  跳过默认的ESM入口，直接引入包内的CommonJS格式构建产物，修改原有导入语句：

  // 开发环境导入
  import { ToastContainer, toast } from 'react-toastify/dist/react-toastify.cjs.development';
  // 生产环境可替换为 react-toastify/dist/react-toastify.cjs.production.min
  import 'react-toastify/dist/ReactToastify.css';
  

  该方案需要手动区分开发/生产环境的导入路径，维护成本较高，仅作为临时备选方案。

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