search

alibaba / lowcode-engine

An enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系
https://lowcode-engine.cn
MIT License
14.5k stars 2.52k forks source link

ant-design-pro 6.0.0-beta.1 整合@alilc/lowcode-engine 1.0.12启动后访问此功能报错 #860

Closed chenfeiwu closed 2 years ago

chenfeiwu commented 2 years ago

ant-design-pro 6.0.0-beta.1 整合@alilc/lowcode-engine 1.0.12启动后访问设计页面报错，官方文档没有这相关例子等，感觉好难啊

Describe the bug (required) / 详细描述 bug（必填）

image

TypeError: Cannot set properties of undefined (setting 'PropTypes')
Module../node_modules/_@alilc_lowcode-designer@1.0.12@@alilc/lowcode-designer/es/builtin-simulator/utils/parse-metadata.js
http://localhost:8000/mf-dep____vendor.62d01dee.js:83663:24
__webpack_require__
http://localhost:8000/mf-va_remoteEntry.js:23:42
Module../node_modules/_@alilc_lowcode-designer@1.0.12@@alilc/lowcode-designer/es/builtin-simulator/host.js
http://localhost:8000/mf-dep____vendor.62d01dee.js:81173:80
__webpack_require__
http://localhost:8000/mf-va_remoteEntry.js:23:42
Module../node_modules/_@alilc_lowcode-designer@1.0.12@@alilc/lowcode-designer/es/builtin-simulator/index.js
http://localhost:8000/mf-dep____vendor.62d01dee.js:82882:63
__webpack_require__
http://localhost:8000/mf-va_remoteEntry.js:23:42
Module../node_modules/_@alilc_lowcode-designer@1.0.12@@alilc/lowcode-designer/es/project/project-view.js
http://localhost:8000/mf-dep____vendor.62d01dee.js:96457:76
__webpack_require__
http://localhost:8000/mf-va_remoteEntry.js:23:42
Module../node_modules/_@alilc_lowcode-designer@1.0.12@@alilc/lowcode-designer/es/project/index.js
http://localhost:8000/mf-dep____vendor.62d01dee.js:96437:71
__webpack_require__
http://localhost:8000/mf-va_remoteEntry.js:23:42
Module../node_modules/_@alilc_lowcode-designer@1.0.12@@alilc/lowcode-designer/es/designer/designer.js
http://localhost:8000/mf-dep____vendor.62d01dee.js:85482:67
__webpack_require__
http://localhost:8000/mf-va_remoteEntry.js:23:42
Module../node_modules/_@alilc_lowcode-designer@1.0.12@@alilc/lowcode-designer/es/designer/index.js
http://localhost:8000/mf-dep____vendor.62d01dee.js:87323:67
__webpack_require__
http://localhost:8000/mf-va_remoteEntry.js:23:42
Module../node_modules/_@alilc_lowcode-designer@1.0.12@@alilc/lowcode-designer/es/document/document-model.js
http://localhost:8000/mf-dep____vendor.62d01dee.js:89255:67
__webpack_require__
http://localhost:8000/mf-va_remoteEntry.js:23:42
Module../node_modules/_@alilc_lowcode-designer@1.0.12@@alilc/lowcode-designer/es/document/index.js
http://localhost:8000/mf-dep____vendor.62d01dee.js:90578:73
__webpack_require__
http://localhost:8000/mf-va_remoteEntry.js:23:42
Module../node_modules/_@alilc_lowcode-designer@1.0.12@@alilc/lowcode-designer/es/component-meta.js
http://localhost:8000/mf-dep____vendor.62d01dee.js:84152:67
__webpack_require__
http://localhost:8000/mf-va_remoteEntry.js:23:42
Module../node_modules/_@alilc_lowcode-designer@1.0.12@@alilc/lowcode-designer/es/index.js
http://localhost:8000/mf-dep____vendor.62d01dee.js:95491:73
__webpack_require__
http://localhost:8000/mf-va_remoteEntry.js:23:42
Module../node_modules/_@alilc_lowcode-engine@1.0.12@@alilc/lowcode-engine/es/engine-core.js
http://localhost:8000/mf-dep____vendor.62d01dee.js:115972:81
__webpack_require__
http://localhost:8000/mf-va_remoteEntry.js:23:42
Module../node_modules/.cache/mfsu/mf-va_@alilc_lowcode-engine.js
http://localhost:8000/mf-dep____vendor.62d01dee.js:38:79
__webpack_require__
http://localhost:8000/mf-va_remoteEntry.js:23:42
(anonymous function)
http://localhost:8000/mf-va_remoteEntry.js:1499:105
__webpack_require__.m.<computed>
webpack:/ant-design-pro/webpack/runtime/remotes loading:2481
  2478 | var onFactory = function(factory) {
  2479 |    data.p = 1;
  2480 |    __webpack_require__.m[id] = function(module) {
> 2481 |        module.exports = factory();
       | ^  2482 |  }
  2483 | };
  2484 | handleFunction(__webpack_require__, data[2], 0, 0, onExternal, 1);
View compiled
options.factory
webpack:/ant-design-pro/webpack/runtime/react refresh:6
  3 | options.factory = function (moduleObject, moduleExports, webpackRequire) {
  4 |   __webpack_require__.$Refresh$.setup(options.id);
  5 |   try {
> 6 |       originalFactory.call(this, moduleObject, moduleExports, webpackRequire);
    | ^  7 |    } finally {
  8 |       if (typeof Promise !== 'undefined' && moduleObject.exports instanceof Promise) {
  9 |           options.module.exports = options.module.exports.then(
View compiled
__webpack_require__
.ant-design-pro/webpack/bootstrap:24
  21 |  var execOptions = { id: moduleId, module: module, factory: __webpack_modules__[moduleId], require: __webpack_require__ };
  22 |  __webpack_require__.i.forEach(function(handler) { handler(execOptions); });
  23 |  module = execOptions.module;
> 24 |  execOptions.factory.call(module.exports, module, module.exports, execOptions.require);
     | ^  25 | } catch(e) {
  26 |  module.error = e;
  27 |  throw e;
View compiled
▶ 3 stack frames were collapsed.
__webpack_require__
.ant-design-pro/webpack/bootstrap:24
  21 |  var execOptions = { id: moduleId, module: module, factory: __webpack_modules__[moduleId], require: __webpack_require__ };
  22 |  __webpack_require__.i.forEach(function(handler) { handler(execOptions); });
  23 |  module = execOptions.module;
> 24 |  execOptions.factory.call(module.exports, module, module.exports, execOptions.require);
     | ^  25 | } catch(e) {
  26 |  module.error = e;
  27 |  throw e;
View compiled
Function.fn
webpack:/ant-design-pro/webpack/runtime/hot module replacement:62

To Reproduce (required) / 如何复现 bug？（必填，非常重要）

# 使用 npm
npm i @ant-design/pro-cli -g
pro create myapp
umi@4
simple

image image image

import React, { useState, useEffect } from 'react'
import { project, plugins, common, skeleton } from '@alilc/lowcode-engine'

// 此 schema 参考 demo 中的默认 schema 书写
import userSchema from './schema.json'

export default function EditorView() {
  /** 插件是否已初始化成功，因为必须要等插件初始化后才能渲染 Workbench */
  const [hasPluginInited, setHasPluginInited] = useState(false);

  useEffect(() => {
    plugins.init().then(() => {
      setHasPluginInited(true)
    }).catch(err => console.error(err))
  }, []);

  useEffect(() => {
    project.importSchema(userSchema)
  }, [userSchema]);

  if (!hasPluginInited) {
    return null;
  }

  return (
    <common.skeletonCabin.Workbench
      skeleton={skeleton}
    />
  );
}

Expected behavior (required) / 预期行为（必填，非常重要）

和Ant Design Pro整合

Environments (please complete the following information) (required): / 请提供如下信息（必填）

LeoYuan commented 2 years ago

<script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>

少引入了这一句？

chenfeiwu commented 2 years ago

<script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>

少引了这句话？

不对呀 我这个是typescript工程呀

LeoYuan commented 2 years ago

看看官网demo的代码，有一个场景是使用antd组件

github-actions[bot] commented 2 years ago

This issue is stale because it has been open 10 days with no activity. Remove stale label or comment or this will be closed in 2 days.

chentiewei commented 1 year ago

@chenfeiwu 你搞定了吗？求帮助！

Yaya-20 commented 1 year ago

您好， 请问下 这个问题怎么解决的

chenfeiwu commented 1 year ago

{ "name": "ant-design-pro", "version": "5.2.0", "private": true, "description": "An out-of-box UI solution for enterprise applications", "scripts": { "analyze": "cross-env ANALYZE=1 umi build", "build": "umi build", "deploy": "npm run build && npm run gh-pages", "dev": "npm run start:dev", "gh-pages": "gh-pages -d dist", "i18n-remove": "pro i18n-remove --locale=zh-CN --write", "postinstall": "umi g tmp", "lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier && npm run tsc", "lint-staged": "lint-staged", "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ", "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style", "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src", "lint:prettier": "prettier -c --write \"src//*\" --end-of-line auto", "lint:style": "stylelint --fix \"src/*/.less\" --syntax less", "openapi": "umi openapi", "playwright": "playwright install && playwright test", "prepare": "husky install", "prettier": "prettier -c --write \"src//*\"", "serve": "umi-serve", "start": "cross-env UMI_ENV=dev umi dev", "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev umi dev", "start:no-mock": "cross-env MOCK=none UMI_ENV=dev umi dev", "start:no-ui": "cross-env UMI_UI=none UMI_ENV=dev umi dev", "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev umi dev", "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev umi dev", "test": "umi test", "test:component": "umi test ./src/components", "test:e2e": "node ./tests/run-tests.js", "tsc": "tsc --noEmit" }, "lint-staged": { "/*.less": "stylelint --syntax less", "*/.{js,jsx,ts,tsx}": "npm run lint-staged:js", "/*.{js,jsx,tsx,ts,less,md,json}": [ "prettier --write" ] }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 10" ], "dependencies": { "@alilc/lowcode-engine": "^1.0.13", "@alilc/lowcode-engine-ext": "^1.0.4", "@ant-design/icons": "^4.7.0", "@ant-design/pro-components": "1.1.1", "@umijs/plugin-sass": "^1.1.1", "@umijs/route-utils": "^2.0.0", "antd": "^4.20.0", "classnames": "^2.3.0", "lodash": "^4.17.0", "moment": "^2.29.0", "node-sass": "^7.0.1", "omit.js": "^2.0.2", "rc-menu": "^9.1.0", "rc-util": "^5.16.0", "react": "^17.0.0", "react-dev-inspector": "^1.7.0", "react-dom": "^17.0.0", "react-helmet-async": "^1.2.0", "umi": "^3.5.0" }, "devDependencies": { "@ant-design/pro-cli": "^2.1.0", "@playwright/test": "^1.17.0", "@types/classnames": "^2.3.1", "@types/express": "^4.17.0", "@types/history": "^4.7.0", "@types/jest": "^26.0.0", "@types/lodash": "^4.14.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "@types/react-helmet": "^6.1.0", "@umijs/fabric": "^2.11.1", "@umijs/openapi": "^1.6.0", "@umijs/plugin-blocks": "^2.2.0", "@umijs/plugin-esbuild": "^1.4.0", "@umijs/plugin-openapi": "^1.3.3", "@umijs/preset-ant-design-pro": "^1.3.0", "@umijs/preset-dumi": "^1.1.0", "@umijs/preset-react": "^2.1.0", "cross-env": "^7.0.0", "cross-port-killer": "^1.3.0", "detect-installer": "^1.0.0", "eslint": "^7.32.0", "gh-pages": "^3.2.0", "husky": "^7.0.4", "jsdom-global": "^3.0.0", "lint-staged": "^10.0.0", "mockjs": "^1.1.0", "prettier": "^2.5.0", "stylelint": "^13.0.0", "swagger-ui-dist": "^4.12.0", "typescript": "^4.5.0", "umi-serve": "^1.9.10", "@alilc/lowcode-react-renderer": "^1.0.13", "@alilc/lowcode-plugin-code-editor": "^1.0.3", "@alilc/lowcode-plugin-code-generator": "^1.0.4", "@alilc/lowcode-plugin-components-pane": "^1.0.3", "@alilc/lowcode-plugin-datasource-pane": "^1.0.5", "@alilc/lowcode-plugin-inject": "^1.1.3", "@alilc/lowcode-plugin-manual": "^1.0.3", "@alilc/lowcode-plugin-schema": "^1.0.1", "@alilc/lowcode-plugin-simulator-select": "^1.0.0", "@alilc/lowcode-plugin-zh-en": "^1.0.0", "@alilc/lowcode-setter-behavior": "^1.0.0", "@alilc/lowcode-setter-title": "^1.0.2", "@alilc/lowcode-utils": "^1.0.13" }, "engines": { "node": ">=12.0.0" } }

b-yp commented 1 year ago

同样遇到这个问题

见这条回答：https://github.com/alibaba/lowcode-engine/issues/860#issuecomment-1196457610 在 index.html 中引入

如果还有问题， 参考这个 demo 项目 https://github.com/alibaba/lowcode-demo/blob/main/demo-general/public/preview.html

Osub commented 9 months ago

我也是集成报错

TypeError: window.React is undefined
./node_modules/@alilc/lowcode-designer/es/builtin-simulator/utils/parse-metadata.js
Osub commented 9 months ago

同样遇到这个问题

见这条回答：#860 (comment) 在 index.html 中引入

如果还有问题， 参考这个 demo 项目 https://github.com/alibaba/lowcode-demo/blob/main/demo-general/public/preview.html

ts 中如何导入？没有npm包吗？必须要用url的方式引入吗？

Osub commented 9 months ago

Unhandled Rejection (TypeError): m.createRoot is not a function

创建项目

npx pro create lowcode

修改config.ts

access: {},
  /**
   * @name <head> 中额外的 script
   * @description 配置 <head> 中额外的 script
   */
  headScripts: [
    // 解决首次加载时白屏的问题
    { src: '/scripts/loading.js', async: true },
    { src: 'https://g.alicdn.com/code/lib/react/16.14.0/umd/react.development.js', async: true },
    { src: 'https://g.alicdn.com/code/lib/react-dom/16.14.0/umd/react-dom.development.js', async: true },
    { src: 'https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js', async: true },
    { src: 'https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js', async: true },
    { src: 'https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js', async: true },
    { src: 'https://g.alicdn.com/code/lib/moment.js/2.29.1/moment-with-locales.min.js', async: true },
    { src: 'https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js', async: true },
    { src: 'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js', async: true },
    { src: 'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/js/engine-ext.js', async: true },
  ],
  externals: {
      "react": "var window.React",
      "react-dom": "var window.ReactDOM",
      "prop-types": "var window.PropTypes",
      "@alifd/next": "var window.Next",
      "@alilc/lowcode-engine": "var window.AliLowCodeEngine",
      "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
      "moment": "var window.moment",
      "lodash": "var window._"
  },

新加页面lowcode.tsx

// import { PageContainer } from '@ant-design/pro-components';
// import { useModel } from '@umijs/max';
// import { theme } from 'antd';
// import React from 'react';
import { init } from '@alilc/lowcode-engine';
init(document.getElementById('lce-container'), {
  enableCondition: true,
  enableCanvasLock: true,
});

// const Welcome: React.FC = () => {
//   const { token } = theme.useToken();
//   const { initialState } = useModel('@@initialState');
//   return (
//     <PageContainer>
//         <div id="">xxxxx</div>
//     </PageContainer>
//   );
// };
//
// export default Welcome;

请教这里哪里有问题？如何修改？ @b-yp

Osub commented 9 months ago

我折腾2天成功了，集成了。原来是react版本太低了