fix: 修复 react-json-view import 异常 Close: #8145 (#8369)

baidu · Oct 12, 2023 · ef2cb9b · ef2cb9b
1 parent 088eeb9
commit ef2cb9b
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/packages/amis-core/src/utils/debug.tsx b/packages/amis-core/src/utils/debug.tsx
@@ -8,10 +8,12 @@ import {findDOMNode, render, unmountComponentAtNode} from 'react-dom';
 // import {createRoot} from 'react-dom/client';
 import {autorun, observable} from 'mobx';
 import {observer} from 'mobx-react';
-import {uuidv4} from './helper';
+import {uuidv4, importLazyComponent} from './helper';
 import position from './position';
 
-export const JsonView = React.lazy(() => import('react-json-view'));
+export const JsonView = React.lazy(() =>
+  import('react-json-view').then(importLazyComponent)
+);
 
 class Log {
   @observable cat = '';

diff --git a/packages/amis-core/src/utils/helper.ts b/packages/amis-core/src/utils/helper.ts
@@ -2175,3 +2175,8 @@ export function evalTrackExpression(
     })
     .join('');
 }
+
+// 很奇怪的问题，react-json-view import 有些情况下 mod.default 才是 esModule
+export function importLazyComponent(mod: any) {
+  return mod.default.__esModule ? mod.default : mod;
+}
diff --git a/packages/amis-editor-core/src/plugin/DataDebug.tsx b/packages/amis-editor-core/src/plugin/DataDebug.tsx
@@ -1,7 +1,10 @@
 import {registerEditorPlugin} from '../manager';
 import {BaseEventContext, BasePlugin, BasicToolbarItem} from '../plugin';
 import React from 'react';
-export const JsonView = React.lazy(() => import('react-json-view'));
+import {importLazyComponent} from 'amis-core';
+export const JsonView = React.lazy(() =>
+  import('react-json-view').then(importLazyComponent)
+);
 
 /**
  * 添加调试功能

diff --git a/packages/amis/src/renderers/Json.tsx b/packages/amis/src/renderers/Json.tsx
@@ -4,9 +4,15 @@ import {Renderer, RendererProps} from 'amis-core';
 import type {InteractionProps} from 'react-json-view';
 import {autobind, getPropValue, noop} from 'amis-core';
 import {BaseSchema} from '../Schema';
-import {resolveVariableAndFilter, isPureVariable} from 'amis-core';
-
-export const JsonView = React.lazy(() => import('react-json-view'));
+import {
+  resolveVariableAndFilter,
+  isPureVariable,
+  importLazyComponent
+} from 'amis-core';
+
+export const JsonView = React.lazy(() =>
+  import('react-json-view').then(importLazyComponent)
+);
 /**
  * JSON 数据展示控件。
  * 文档：https://aisuda.bce.baidu.com/amis/zh-CN/components/json