cube-studio vision 前端页面运行不起来。

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<Moment>, 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 | <div className={style.summaryStyle}> 213 | <Text>{nodeCount} assets in total</Text>

214 | <FocusZone> | ^^^^^^^^^ 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 | </Draggable> 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<Moment>, 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<Moment>, unknown, any> & CommonPickerMethods' is not a valid JSX element. 68 | name={item.name} 69 | >

70 | <DatePicker style={{ width: '100%' }} /> | ^^^^^^^^^^ 71 | </Form.Item></Col> 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<Moment>, 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 | <RangePicker /> | ^^^^^^^^^^^ 102 | </Form.Item></Col> 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 | <Row> 561 | <Col span={10} offset={1}>

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 | </Col> 570 | <Col span={10} offset={2}>

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 |
``

Oct 18 '22 08:10 JSProxy

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

Nov 10 '22 07:11 YuchaoLau

试试这个方法 https://github.com/headzoo/react-moment/issues/148

Nov 10 '22 08:11 YuchaoLau

作者在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即可

Nov 14 '22 15:11 alanpeng

cube-studio cube-studio copied to clipboard

vision 前端页面运行不起来。

cube-studio
cube-studio copied to clipboard