umi创建的ant-design-pro项目引入amis报错

iceycc commented 9 months ago

描述问题：

我用umi脚手架初始化，选择ant-design-pro模版，然后页面中引入amis报错

截图或视频：

报错信息：

TypeError: Cannot read properties of undefined (reading 'split')
(anonymous function)
http://localhost:8000/mf-dep____vendor.d7402170.js:527640:37
(anonymous function)
http://localhost:8000/mf-dep____vendor.d7402170.js:527607:20
./node_modules/.pnpm/moment-timezone@0.5.43/node_modules/moment-timezone/moment-timezone.js
http://localhost:8000/mf-dep____vendor.d7402170.js:527614:2
__webpack_require__
http://localhost:8000/mf-va_remoteEntry.js:797:42
./node_modules/.pnpm/moment-timezone@0.5.43/node_modules/moment-timezone/index.js
http://localhost:8000/mf-dep____vendor.d7402170.js:527584:31
__webpack_require__
http://localhost:8000/mf-va_remoteEntry.js:797:42
./node_modules/.pnpm/amis@3.5.2_e6cwtnxqj55umllknl7ucpcm4u/node_modules/amis/esm/renderers/Date.js
http://localhost:8000/mf-dep____vendor.d7402170.js:196867:73
__webpack_require__
http://localhost:8000/mf-va_remoteEntry.js:797:42
./node_modules/.pnpm/amis@3.5.2_e6cwtnxqj55umllknl7ucpcm4u/node_modules/amis/esm/index.js
http://localhost:8000/mf-dep____vendor.d7402170.js:189435:77
__webpack_require__
http://localhost:8000/mf-va_remoteEntry.js:797:42
./node_modules/.cache/mfsu/mf-va_amis.js
http://localhost:8000/mf-dep____vendor.d7402170.js:6334:127
__webpack_require__
http://localhost:8000/mf-va_remoteEntry.js:797:42
(anonymous function)
http://localhost:8000/mf-va_remoteEntry.js:127:105
__webpack_require__.m.<computed>
webpack:/ant-design-pro/webpack/runtime/remotes loading:1525
  1522 | var onFactory = function(factory) {
  1523 |    data.p = 1;
  1524 |    __webpack_require__.m[id] = function(module) {
> 1525 |        module.exports = factory();
       | ^  1526 |  }
  1527 | };
  1528 | 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
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

如何复现（请务必完整填写下面内容）：

你是如何使用 amis 的？ sdk、npm 或其他... 先用umi初始化react，antd-design-pro 模板，然后安装官网方法用pnpm安装amis，粘贴官方快速开始的实例报错,

amis 版本是什么？请先在最新 beta 版本测试问题是否存在完整的pakage：


{
"name": "ant-design-pro",
"version": "6.0.0",
"private": true,
"description": "An out-of-box UI solution for enterprise applications",
"scripts": {
"analyze": "cross-env ANALYZE=1 max build",
"build": "max 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": "max setup",
"jest": "jest",
"lint": "npm run lint:js && 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 ",
"lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
"lint:prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\" --end-of-line auto",
"openapi": "max openapi",
"prepare": "husky install",
"prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\"",
"preview": "npm run build && max preview --port 8000",
"record": "cross-env NODE_ENV=development REACT_APP_ENV=test max record --scene=login",
"serve": "umi-serve",
"start": "cross-env UMI_ENV=dev max dev",
"start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev",
"start:no-mock": "cross-env MOCK=none UMI_ENV=dev max dev",
"start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev",
"start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev",
"test": "jest",
"test:coverage": "npm run jest -- --coverage",
"test:update": "npm run jest -- -u",
"tsc": "tsc --noEmit"
},
"lint-staged": {
"**/*.{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": {
"@ant-design/icons": "^4.8.0",
"@ant-design/pro-components": "^2.3.57",
"@ant-design/use-emotion-css": "1.0.4",
"@umijs/route-utils": "^2.2.2",
"amis": "^3.5.2",
"amis-core": "^3.5.2",
"amis-editor": "^5.6.2",
"amis-ui": "^3.5.2",
"antd": "^5.8.2",
"axios": "^1.6.1",
"classnames": "^2.3.2",
"copy-to-clipboard": "^3.3.3",
"lodash": "^4.17.21",
"mobx": "4",
"mobx-react": "^9.1.0",
"moment": "^2.29.4",
"moment-timezone": "^0.5.43",
"omit.js": "^2.0.2",
"rc-menu": "^9.8.2",
"rc-util": "^5.27.2",
"react": "^18.2.0",
"react-dev-inspector": "^1.8.4",
"react-dom": "^18.2.0",
"react-helmet-async": "^1.3.0",
"react-quill": "^2.0.0"
},
"devDependencies": {
"@ant-design/pro-cli": "^2.1.5",
"@testing-library/react": "^13.4.0",
"@types/classnames": "^2.3.1",
"@types/express": "^4.17.17",
"@types/history": "^4.7.11",
"@types/jest": "^29.4.0",
"@types/lodash": "^4.14.191",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@types/react-helmet": "^6.1.6",
"@umijs/fabric": "^2.14.1",
"@umijs/lint": "^4.0.52",
"@umijs/max": "^4.0.52",
"cross-env": "^7.0.3",
"eslint": "^8.34.0",
"express": "^4.18.2",
"gh-pages": "^3.2.3",
"husky": "^7.0.4",
"jest": "^29.4.3",
"jest-environment-jsdom": "^29.4.3",
"lint-staged": "^10.5.4",
"mockjs": "^1.1.0",
"prettier": "^2.8.4",
"swagger-ui-dist": "^4.15.5",
"ts-node": "^10.9.1",
"typescript": "^4.9.5",
"umi-presets-pro": "^2.0.2"
},
"engines": {
"node": ">=12.0.0"
}
}


3. 粘贴有问题的完整 `amis schema` 代码：

import 'amis/lib/themes/cxd.css'; import 'amis/lib/helper.css'; import 'amis/sdk/iconfont.css'; // 或 import 'amis/lib/themes/antd.css'; import * as React from 'react';

import {render as renderAmis} from 'amis'; import {ToastComponent, AlertComponent} from 'amis-ui';

export default ()=>{ let theme = 'cxd'; let locale = 'zh-CN';

// 请勿使用 React.StrictMode，目前还不支持 return (

通过 amis 渲染页面

{ renderAmis( { type: 'page', title: '简单页面', body: '内容' }, { // props }, { // env... theme: 'cxd' // cxd 或 antd } ) }

); }



4. 操作步骤
umi初始化`ant-design-pro`目标，然后安装amis，黏贴官方快速开始代码，启动，到对应页面报错。
![Uploading image.png…]()

iceycc commented 9 months ago

umi

github-actions[bot] commented 9 months ago

👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

beeant0512 commented 9 months ago

同样出现问题，更新依赖后就出现了

beeant0512 commented 9 months ago

@iceycc 有解决方案了吗？

backy6677 commented 9 months ago

问题还存在

csx-bill commented 9 months ago

参考我的 https://github.com/csx-bill/quick-admin antd pro 的

TinyD0409 commented 9 months ago

我也遇到这个问题了，umi3.*的模板是没问题的，用4.0的模板就不行

csx-bill commented 9 months ago

我也遇到这个问题了，umi3.*的模板是没问题的，用4.0的模板就不行参考我的 https://github.com/csx-bill/quick-admin antd pro 的

TinyD0409 commented 9 months ago

我也遇到这个问题了，umi3.*的模板是没问题的，用4.0的模板就不行参考我的 https://github.com/csx-bill/quick-admin antd pro 的

看完解决了，感谢~ 把config.ts里的 moment2dayjs: { preset: 'antd', plugins: ['duration'], }, 这个注释掉就可以了。应该amis用的还是moment，和antd全面转dayjs冲突了。

Icodezhan commented 6 months ago

我也遇到这个问题了，umi3.*的模板是没问题的，用4.0的模板就不行参考我的 https://github.com/csx-bill/quick-admin antd pro 的

看完解决了，感谢~ 把config.ts里的 moment2dayjs: { preset: 'antd', plugins: ['duration'], }, 这个注释掉就可以了。应该amis用的还是moment，和antd全面转dayjs冲突了。

csx-bill commented 6 months ago

我也遇到这个问题了，umi3.*的模板是没问题的，用4.0的模板就不行参考我的 https://github.com/csx-bill/quick-admin antd pro 的

看完解决了，感谢~ 把config.ts里的 moment2dayjs: { preset: 'antd', plugins: ['duration'], }, 这个注释掉就可以了。应该amis用的还是moment，和antd全面转dayjs冲突了。

是的

baidu / amis