使用 antd pro 官方脚手架，mfsu 报错！

[lifegit]

使用脚手架 getting-started 生成代码运行报错，内容如下：

Uncaught TypeError: moment__WEBPACK_IMPORTED_MODULE_0___default(...).isMoment is not a function
    at convertMoment (:8000/mf-dep_vendors-node_modules_ant-design_pro-form_es_components_SchemaForm_index_js-node_modules_ant-d-8f7d67.81f9a20e.async.js:10698)
    at :8000/mf-dep_vendors-node_modules_ant-design_pro-form_es_components_SchemaForm_index_js-node_modules_ant-d-8f7d67.81f9a20e.async.js:10770
    at Array.forEach (<anonymous>)
    at conversionMomentValue (:8000/mf-dep_vendors-node_modules_ant-design_pro-form_es_components_SchemaForm_index_js-node_modules_ant-d-8f7d67.81f9a20e.async.js:10731)
    at :8000/mf-dep_vendors-node_modules_ant-design_pro-form_es_components_SchemaForm_index_js-node_modules_ant-d-8f7d67.81f9a20e.async.js:4664
    at :8000/mf-dep_vendors-node_modules_ant-design_pro-form_es_components_SchemaForm_index_js-node_modules_ant-d-8f7d67.81f9a20e.async.js:4721
    at invokePassiveEffectCreate (:8000/mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23491)
    at HTMLUnknownElement.callCallback (:8000/mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:3954)
    at Object.invokeGuardedCallbackDev (:8000/mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:4003)
    at invokeGuardedCallback (:8000/mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:4065)
    at flushPassiveEffectsImpl (:8000/mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23578)
    at unstable_runWithPriority (:8000/mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:27147)
    at runWithPriority$1 (:8000/mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11285)
    at flushPassiveEffects (:8000/mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23451)
    at performSyncWorkOnRoot (:8000/mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:22273)
    at :8000/mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11336
    at unstable_runWithPriority (:8000/mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:27147)
    at runWithPriority$1 (:8000/mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11285)
    at flushSyncCallbackQueueImpl (:8000/mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11331)
    at flushSyncCallbackQueue (:8000/mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11318)
    at scheduleUpdateOnFiber (:8000/mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:21897)
    at dispatchAction (:8000/mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:16148)
    at checkForUpdates (:8000/mf-dep_vendors-node_modules_umi_node_modules_umijs_runtime_dist_index_esm_js.781db3b3.async.js:952)
    at :8000/mf-dep_vendors-node_modules_umi_node_modules_umijs_runtime_dist_index_esm_js.781db3b3.async.js:510
    at Set.forEach (<anonymous>)
    at LoadableSubscription._update (:8000/mf-dep_vendors-node_modules_umi_node_modules_umijs_runtime_dist_index_esm_js.781db3b3.async.js:509)
    at :8000/mf-dep_vendors-node_modules_umi_node_modules_umijs_runtime_dist_index_esm_js.781db3b3.async.js:492

初步排查，当 config/config.ts 开启 umi 的 mfsu: {}功能， 且使用 @ant-design/pro-form(src/pages/user/Login/index.tsx) 就会出现问题。

demo: create-antd-pro

[Dunqing]

解决了吗

[lifegit]

解决了吗

你也遇到了吗？

[Dunqing]

解决了吗

你也遇到了吗？

对的

[lifegit]

目前没解决。还是用的Moment，但用了umi的 ignoreMomentLocale

[Dunqing]

排查结果

debug后发现是执行isMoment报错猜测是不存在isMoment

手动导入isMoment插件发现报了这个错误

[MFSU] require('dayjs/plugin/isMoment') found in C:\Users\dengqing\goldpig-project\golden-pig-walle\packages\express\src\libs\dayjs\format.ts, which will broken the MFSU prebuild match, p

我猜测mfsu不支持require导入，而这个转换插件正是以require的方式去引入所需要的插件，导致moment需要执行的方法都没有extend进去。

antd-dayjs-webpack-plugin/src/init-loader.js

Lines 6 to 12 in 32951b4

	options.plugins.forEach((plugin) => {
	source += `var ${plugin} = require('dayjs/plugin/${plugin}');`
	})
	options.plugins.forEach((plugin) => {
	source += `dayjs.extend(${plugin});`
	})

解决方案如下

手动导入moment需要转换的插件：

antd-dayjs-webpack-plugin/src/index.js

Lines 5 to 18 in 32951b4

	plugins: [
	'isSameOrBefore',
	'isSameOrAfter',
	'advancedFormat',
	'customParseFormat',
	'weekday',
	'weekYear',
	'weekOfYear',
	'isMoment',
	'localeData',
	'localizedFormat',
	],
	replaceMoment: true
	},

导入方式：

import isMoment from 'dayjs/esm/plugin/isMoment';
dayjs.extend(isMoment as any);

暂时还不知道怎么以webpack插件的方式去修复这个问题

[pccai]

Cache group "default" conflicts with existing chunk.

[q269384828]

我也排查了一下, 简单地说, 是开了msfu 之后, 用到的那部分代码不在 umi.js里面了;
按我的理解,这个插件就干了2件事情:

1. 改alias 将 import Moment from 'moment' 里的 moment 指鹿为马成 dayjs;
2. 使用了dayjs 插件方法,让dayjs 方法签名和moment 保持一致, 在entry中添加了,dayjs.extends(xxxx);

因为开 msfu之前, antd都打包到 umi里面了, 所以 import Moment from 'dayjs', 之后改动 Moment 其实改得是同一个,

[lxy94]

@Dunqing 你的可以了吗？我引入以后日历全变成相同的数了

[lxy94]

我在config设置了
alias：{'moment':'dayjs'},
并且在用到组件的地方引入了
import dayjs from 'dayjs'
import isMoment from 'dayjs/esm/plugin/isMoment';
import badMutable from 'dayjs/esm/plugin/badMutable';

dayjs.extend(isMoment as any);
dayjs.extend(badMutable as any);
看起来可以，打包后少了0.02M