vision 前端页面运行不起来。

[JSProxy]

ERROR in src/components/FlowEditor/components/EditorBody/components/Setting/index.tsx:247:12
TS2786: 'DatePicker' cannot be used as a JSX component.
Its instance type 'Component<PickerProps, unknown, any> & CommonPickerMethods' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/Users/zhangfeng/Downloads/cube-studio-master/myapp/vision/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
245 | /> */}
246 | <div style={{ fontWeight: 600, padding: '5px 0px' }}>补录起点

247 | <DatePicker
| ^^^^^^^^^^
248 | style={{ width: '100%', border: '1px solid rgb(55, 55, 55)' }}
249 | locale={locale}
250 | showTime

ERROR in src/components/ModuleTree/index.tsx:214:14
TS2786: 'FocusZone' cannot be used as a JSX component.
Its instance type 'FocusZone' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/Users/zhangfeng/Downloads/cube-studio-master/myapp/vision/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode'.
212 |

213 | {nodeCount} assets in total

214 |
| ^^^^^^^^^
215 | <IconButton
216 | iconProps={{
217 | iconName: 'Refresh',

ERROR in src/pages/componentsChilder/InformationDisplayChilder/index.tsx:182:10
TS2786: 'Draggable' cannot be used as a JSX component.
Its instance type 'Draggable' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/Users/zhangfeng/Downloads/cube-studio-master/myapp/vision/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode'.
180 | onCancel={onCancel}
181 | modalRender={modal => (

182 | <Draggable disabled={disabled} bounds={bounds} onStart={(event, uiData) => onStart(event, uiData)}>
| ^^^^^^^^^
183 |

{modal}

184 |
185 | )}

ERROR in src/pages/componentsChilder/PolicyInformation/index.tsx:298:14
TS2786: 'ReactJson' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<ReactJsonViewProps, any, any> | null' is not a valid JSX element.
Type 'Component<ReactJsonViewProps, any, any>' is not assignable to type 'Element | ElementClass | null'.
Type 'Component<ReactJsonViewProps, any, any>' is not assignable to type 'ElementClass'.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/Users/zhangfeng/Downloads/cube-studio-master/myapp/vision/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode'.
296 | {/* <TextArea style={{ display: 'none' }} /> */}
297 |

298 | <ReactJson
| ^^^^^^^^^
299 | // eslint-disable-next-line
300 | src={valueListTable.title === '修改策略信息' ? JSON.parse(value7) : value5}
301 | onDelete={e => onDelete(e)} // 删除属性

ERROR in src/pages/componentsChilder/RegisterAuxiliary/index.tsx:147:14
TS2786: 'ReactJson' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<ReactJsonViewProps, any, any> | null' is not a valid JSX element.
145 | {/* <TextArea rows={4} /> */}
146 |

147 | <ReactJson
| ^^^^^^^^^
148 | // eslint-disable-next-line
149 | src={value5}
150 | onDelete={e => onDelete(e)} // 删除属性

ERROR in src/pages/HeterogeneousPlatform/componentsAdmin/components/EditForm/index.tsx:101:42
TS2786: 'DatePicker' cannot be used as a JSX component.
Its instance type 'Component<PickerProps, unknown, any> & CommonPickerMethods' is not a valid JSX element.
99 | rules={[{ required: true, message: '请选择' + item.label }]}
100 | >

101 | <DatePicker style={{ width: '100%' }} />
| ^^^^^^^^^^
102 | </Form.Item>
103 | )
104 | break;

ERROR in src/pages/HeterogeneousPlatform/componentsAdmin/components/EditForm/index.tsx:132:42
TS2786: 'ReactJson' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<ReactJsonViewProps, any, any> | null' is not a valid JSX element.
130 | // rules={[{ required: true, message: '请输入' + item.label }]}
131 | >

132 | <ReactJson
| ^^^^^^^^^
133 | // eslint-disable-next-line
134 | src={ (jsonStr) }
135 | displayDataTypes={false}

ERROR in src/pages/HeterogeneousPlatform/componentsAdmin/components/QueryForm/index.tsx:70:50
TS2786: 'DatePicker' cannot be used as a JSX component.
Its instance type 'Component<PickerProps, unknown, any> & CommonPickerMethods' is not a valid JSX element.
68 | name={item.name}
69 | >

70 | <DatePicker style={{ width: '100%' }} />
| ^^^^^^^^^^
71 | </Form.Item>
72 | )
73 | break;

ERROR in src/pages/HeterogeneousPlatform/componentsAdmin/components/QueryForm/index.tsx:101:50
TS2786: 'RangePicker' cannot be used as a JSX component.
Its instance type 'Component<RangePickerProps, unknown, any> & CommonPickerMethods' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/Users/zhangfeng/Downloads/cube-studio-master/myapp/vision/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode'.
99 | name={item.name}
100 | >

101 |
| ^^^^^^^^^^^
102 | </Form.Item>
103 | )
104 | break;

ERROR in src/pages/HeterogeneousPlatform/componentsAdmin/components/StepsForm/index.tsx:562:30
TS2786: 'ReactJson' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<ReactJsonViewProps, any, any> | null' is not a valid JSX element.
560 |
561 |

562 | <ReactJson
| ^^^^^^^^^
563 | style={{ height: "400px", overflowY: "auto" }}
564 | src={viewObj}
565 | displayDataTypes={false}

ERROR in src/pages/HeterogeneousPlatform/componentsAdmin/components/StepsForm/index.tsx:571:30
TS2786: 'ReactJson' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<ReactJsonViewProps, any, any> | null' is not a valid JSX element.
569 |
570 |

571 | <ReactJson
| ^^^^^^^^^
572 | style={{ height: "400px", overflowY: "auto" }}
573 | src={newMap_config}
574 | displayDataTypes={false}

ERROR in src/pages/HeterogeneousPlatform/NationalkaraokeChilder/SceneModeTable/FeatureConfigurationTable.tsx:33:13
TS2786: 'SortableBody' cannot be used as a JSX component.
Its instance type 'Component<any, any, any>' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/Users/zhangfeng/Downloads/cube-studio-master/myapp/vision/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode'.
31 |
32 | function DraggableContainer(props: any) {

33 | return <SortableBody useDragHandle disableAutoscroll helperClass="row-dragging" onSortEnd={onSortEnd} {...props} />;
| ^^^^^^^^^^^^
34 | }
35 |
36 | function DraggableBodyRow({ className, style, ...restProps }: ItemDraggableBodyRow) {

ERROR in src/pages/HeterogeneousPlatform/NationalkaraokeChilder/SceneModeTable/FeatureConfigurationTable.tsx:39:13
TS2786: 'SortableItem' cannot be used as a JSX component.
Its instance type 'Component<any, any, any>' is not a valid JSX element.
37 | // function findIndex base on Table rowKey props and should always be a right array index
38 | const index = dataSource.findIndex((x: any) => x.index === restProps['data-row-key']);

39 | return <SortableItem index={index} {...restProps} />;
| ^^^^^^^^^^^^
40 | }
41 | return (
42 |

ERROR in src/pages/HeterogeneousPlatform/NationalkaraokeChilder/SceneModeTable/FeatureConfigurationTableSort.tsx:38:13
TS2786: 'SortableBody' cannot be used as a JSX component.
Its instance type 'Component<any, any, any>' is not a valid JSX element.
36 |
37 | function DraggableContainer(props: any) {

38 | return <SortableBody useDragHandle disableAutoscroll helperClass="row-dragging" onSortEnd={onSortEnd} {...props} />;
| ^^^^^^^^^^^^
39 | }
40 |
41 | function DraggableBodyRow({ className, style, ...restProps }: ### ItemDraggableBodyRow) {

ERROR in src/pages/HeterogeneousPlatform/NationalkaraokeChilder/SceneModeTable/FeatureConfigurationTableSort.tsx:46:13
TS2786: 'SortableItem' cannot be used as a JSX component.
Its instance type 'Component<any, any, any>' is not a valid JSX element.
44 | return x.index === restProps['data-row-key'];
45 | });

46 | return <SortableItem index={index} {...restProps} />;
| ^^^^^^^^^^^^
47 | }
48 | return (
49 |

``

[YuchaoLau]

出现了类似错误，还没有解决

[YuchaoLau]

试试这个方法
headzoo/react-moment#148

[alanpeng]

作者在2022.09.01更新了相关文档细节：
https://github.com/tencentmusic/cube-studio/tree/v2022.09.01/install/docker
按下面步骤编译没问题了：
cd /root/
克隆项目代码：
git clone https://github.com/tencentmusic/cube-studio
cd cube-studio
git checkout v2022.09.01
启动一个node容器并挂载代码目录：
docker run -itd --network=host --name=node-cube-studio -v /root/cube-studio/myapp:/myapp node:18.12.1
进入容器内：
docker exec -it node-cube-studio bash

如果网络不太好，可以先执行下面语句：
npm config set registry https://registry.npmmirror.com/
或者：
yarn config set registry https://registry.npmmirror.com/

容器内的操作：
安装node版本管理器：
npm install -g n
如果有提示，升级一下npm版本，此步骤非必须：
npm install -g [email protected]
切换到适合项目代码的版本：
n 17.0.0

编译frontend项目：
cd /myapp/frontend/
安装react-dev-utils包：
npm install --save-dev react-dev-utils
进入调试模式
npm run start
或打包编译静态资源
npm run build

编译visionPlus项目：
cd /myapp/visionPlus/
yarn && yarn build

编译vision项目：
备注：对于frontend和visionPlus，n命令切换版本，用17.0.0版本直接就可以编译了，对vision项目，还需要修改package.json文件。可参考以下帖子内容：
https://cloud.tencent.com/developer/ask/sof/33449

cd /myapp/vision
在vision的package.json文件尾部内加入
"resolutions": {
"@types/react": "17.0.0",
"@types/react-dom": "17.0.0"
},
最后内容即：
"resolutions": {
"@types/react": "17.0.0",
"@types/react-dom": "17.0.0"
},
"homepage": "./"
}

然后再执行yarn && yarn build即可