React应用引入react-planner报无默认导出错误如何解决

问题现象 #

在自有React应用中安装react-planner依赖开发仓库设计功能时，参照官方示例编写的代码无法正常编译，报错提示包不存在默认导出。

报错详情 #

Attempted import error: 'react-planner' does not contain a default export (imported as 'ReactPlanner')
报错文件路径：./src/components/dashboard/Warehouse/WarehouseDesign.tsx

问题复现代码 #

import React from "react";
import ReactPlanner from "react-planner";

function WarehouseDesign() {
  return (
    <div>
      <h2>design</h2>
      <ReactPlanner
        // catalog={MyCatalog}
        width={800}
        height={600}
        //  plugins={plugins}
        stateExtractor={(state) => state.get("react-planner")}
      />
    </div>
  );
}

export default WarehouseDesign

故障原因 #

react-planner 未提供ES Module规范的默认导出，代码中使用的默认导入语法无法匹配到包内暴露的组件对象。

修复步骤 #

• 替换错误的默认导入语句，优先使用命名导入方式引入核心编辑器组件：

  // 替换原有的默认导入语句
  import { Planner as ReactPlanner } from "react-planner";
  

  如果上述写法提示找不到Planner命名导出，说明安装的是CommonJS规范打包的旧版本，改用命名空间导入兼容：

  import * as ReactPlannerModule from "react-planner";
  // 兼容处理CommonJS导出的default挂载
  const ReactPlanner = ReactPlannerModule.default || ReactPlannerModule;
  

• 补全组件必填配置项。当前代码中注释掉的catalog（素材目录）、plugins（功能插件）都是组件运行的必填参数，同时需要提前在项目的Redux Store中注册react-planner对应的reducer，保证stateExtractor配置的状态提取逻辑可以正常拿到插件的状态切片，否则导入问题修复后组件依然无法正常运行。

修复后参考代码 #

import React from "react";
// 按安装的版本选择对应导入方式
import { Planner as ReactPlanner } from "react-planner";
// 补全自定义的catalog、plugins、reducer配置
// import MyCatalog from "./catalog";
// import plugins from "./plugins";

function WarehouseDesign() {
  return (
    <div>
      <h2>design</h2>
      <ReactPlanner
        // catalog={MyCatalog}
        width={800}
        height={600}
        // plugins={plugins}
        stateExtractor={(state) => state.get("react-planner")}
      />
    </div>
  );
}

export default WarehouseDesign

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