React.js中非默认属性ControlType动态导入报错问题求助

在React.js中，我们通常这样导入BraftEditor及其非默认导出的ControlType：

import BraftEditor, { ControlType } from 'braft-editor'

对于默认导出的BraftEditor，可以通过以下方式实现无SSR动态导入：

const BraftEditorNoSSR = dynamic(import('braft-editor'), {ssr: false})

但尝试用类似方式动态导入非默认属性ControlType时：

const ControlType = dynamic(() =>
  import('braft-editor').then(lib => lib.ControlType), {ssr: false}
);

出现了类型错误：

./DraftEditor.tsx:11:42
Type error: Property 'ControlType' does not exist on type 'typeof import("/project/node_modules/braft-editor/index")'.

   9 | const BraftEditor = dynamic(import('braft-editor'), {ssr: false})
  10 | const ControlType = dynamic(() =>
> 11 |   import('braft-editor').then(lib => lib.ControlType), {ssr: false}
     |                                          ^
  12 | );
  13 | const CLASS_NAME = 'MuiEditor-root'
  14 | const useStyles = makeStyles((theme: Theme) => ({
npm ERR! Lifecycle script `build` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: @app/lib@0.0.1 
npm ERR!   at location: /project/packages/lib 

请问该如何正确动态导入非默认属性ControlType？

解决方案 #

方法1：包装目标属性为默认导出 #

dynamic函数要求导入的模块返回React组件或包含default导出的对象，直接返回ControlType不符合要求，且会触发TypeScript类型检测报错。正确做法是在回调中返回包含该属性的对象，将其设为default导出：

const ControlTypeModule = dynamic(() =>
  import('braft-editor').then(lib => ({ default: lib.ControlType })), 
  { ssr: false }
);
// 使用时直接引用 ControlTypeModule 即可

方法2：一次性导入所有所需成员 #

如果同时需要BraftEditor和ControlType，可以在一次动态导入中获取所有需要的导出，既简洁又能避免类型问题：

const EditorModule = dynamic(() =>
  import('braft-editor').then(lib => ({
    default: lib.default,
    ControlType: lib.ControlType
  })),
  { ssr: false }
);
// 使用示例：
// const BraftEditor = EditorModule.default;
// const ControlType = EditorModule.ControlType;

方法3：修正TypeScript类型声明 #

若报错由TypeScript类型检测导致，可检查braft-editor的类型定义是否完整，或手动扩展类型声明：
在项目的types目录下创建braft-editor.d.ts文件，添加如下内容：

declare module 'braft-editor' {
  // 替换为更精确的类型以保证类型安全
  export const ControlType: any;
  export default function BraftEditor(props: Record<string, any>): JSX.Element;
}

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