windows系统下编译产物运行时异常
问题
在Windows中访问线上环境页面白屏，并且控制台中展示错误，但是本地启动资源的开发服务显示是正常的。
或者在本地启动资源服务时报错：
ERROR in ./node_modules/i18next/dist/esm/i18next.js 12:0-46
Module not found: Error: Can't resolve 'core-js/modules/es.date.to-string.js' in 'D:\...\cplm-ckd-bill-master\node_modules\i18next\dist\esm'
@ ./node_modules/@cvte/mes-i18n/es/index.js 11:0-27 100:10-18 109:24-28 155:11-15
@ ./node_modules/@cvte/xioo-ag-table/es/SingleTable/SingleTable.js 52:0-37 163:58-75 192:58-75 342:27-44 369:28-45 402:46-63 561:96-113 561:139-156 1872:24-41 2731:17-34
@ ./node_modules/@cvte/xioo-ag-table/es/SingleTable/TableWrapper.js 8:0-40 172:42-53
@ ./node_modules/@cvte/xioo-ag-table/es/SingleTable/index.js 1:0-41 2:15-26
@ ./node_modules/@cvte/xioo-ag-table/es/index.js 1:0-55 1:0-55
@ ./src/plugin/CkdBill/components/BillList/BillList.tsx 15:0-68 62:35-60 75:30-55 79:38-49
@ ./src/plugin/CkdBill/components/BillList/index.tsx 1:0-34 2:15-23
@ ./src/plugin/CkdBill/CkdBill.tsx 29:0-45 287:39-47 300:38-46
@ ./src/plugin/CkdBill/index.tsx 1:0-32 2:15-22
@ container entry CkdBill[0]解决
确保本地资源中心脚手架版本大于等于：@cvte/resource-center-cli@1.9.0-beta.29
在资源工程根目录下创建构建配置文件webpack.config.rc.js或rcpack.config.rc.js，自定义ts/js文件的构建配置；（配置文件名为脚手架识别的关键字，请勿自定义名称）
示例如下：
async function override(config, webpack){
if(config.module.rules && config.module.rules.length){
// 找到config中对应的ts编译规则
const tsLoaderIndex = config.module.rules.findIndex(p => p.test.toString().includes("[tj]s(x)?$"));
const tsLoader = config.module.rules[tsLoaderIndex];
if(tsLoaderIndex>=0){
config.module.rules[tsLoaderIndex]={
test:/\.[tj]s(x)?$/,
use:[
{
loader:'babel-loader',
options:{
cacheDirectory:true,
sourceType:'unambiguous',
presets:[
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript',
]
}
}
],
exclude: /node_modules\/(?!(@cvte)).*/,
}
}
}
return config;
}
module.exports = override;同时按照如上示例，需要在资源工程中安装开发依赖：npm install -S babel-loader@8.2.3 @babel/core@7.16.12 @babel/preset-env@7.16.11 @babel/preset-react@7.16.7 @babel/preset-typescript@7.16.7
使用本地调试，但无法正常加载
问题
使用浏览器插件将资源请求转发到本地开发服务后，页面无法正常加载本地资源，并且在控制台中显示如下报错
解决
需要打开当前页面的host对应的安全限制
依赖缺失
问题
编译使用本地脚手架进行编译，根据依赖树查找，本地模块可能会有一些依赖缺失。
可根据编译的报错提示，安装开发依赖。
解决
npm i react-dom@17.0.2 --save-dev
# 或
yarn add -D react-dom@17.0.2@cvte/cir-framework编译异常
问题
在有@cvte/cir-framework依赖的工程中，编译时会遇到如上类似的问题。
该问题导致原因是@cvte/cir-framework的config/client.js导出依赖为全量导出，导致在编译引入该文件的地方时，编译了其他的用途文件。
解决
在资源目录下安装开发依赖:@cvte/cir-framework@3.0.1-rc.1
npm i @cvte/cir-framework@3.0.1-rc.1 --save-dev
# 或使用yarn安装
yarn add -D @cvte/cir-framework@3.0.1-rc.1mobx依赖版本不兼容问题
loadComp error TypeError: decorator is not a function
at eval (applyDecoratedDescriptor.js:34:12)
at Array.reduce (<anonymous>)
at _applyDecoratedDescriptor (applyDecoratedDescriptor.js:33:309)
at eval (index.ts:407:104)
at Module../node_modules/@cvte/cir-view/entities/index.ts (vendors-node_modules_cvte_cir-view_entities_buttonConfig_tsx-node_modules_cvte_cir-view_pages-97f68f.67bbb5fd.1647842978540.js:2:88437)
at __webpack_require__ (rc.index.js:2:5372)
at eval (dataConfig.tsx:34:65)
at Module../node_modules/@cvte/cir-view/entities/dataConfig.tsx (vendors-node_modules_cvte_cir-view_entities_buttonConfig_tsx-node_modules_cvte_cir-view_pages-97f68f.67bbb5fd.1647842978540.js:2:47383)
at __webpack_require__ (rc.index.js:2:5372)
at eval (DataConfig.tsx:42:79)问题
本示例的原因是由组件开发时使用装饰器的写法异常引起的。
但根因是因为@cvte/cir-tools中引入代码有使用mobx的去观察全局的路由状态，而资源mobx引入时与宿主应用全局的mobx不兼容，导致装饰器的转换失效。
所以请检查资源共享的mobx及相关依赖版本是否和宿主应用没有过大版本的差异，如果有则与宿主应用开发者联系，协商解决此类版本兼容问题
解决
在资源工程中，重新安装协商后的依赖版本即可。
当前CSB应用工程通用的mobx及相关依赖的版本在package.json中配置如下：
{
"mobx": "5.0.3",
"mobx-react": "5.2.3",
"mobx-react-lite": "2.0.7",
"mobx-utils": "5.0.0"
}并在资源工程的rc.exposes.js导出文件中加入mobx共享：
export default {
// 其他代码
shared: {
// 其他代码
mobx: {
isSingleton: true,
}
},
}mobx-react-lite版本异常
问题
本问题是由于资源工程中mobx-react-lite与自身的mobx冲突不兼容导致。
解决
根据官方版本搭配来进行安装，目前CSB的mobx依赖版本组合如下：
{
"mobx": "5.0.3",
"mobx-react": "5.2.3",
"mobx-react-lite": "2.0.7",
"mobx-utils": "5.0.0"
}整个工程目录文件都发生修改
在资源中心脚手架完成编译/推送之后，当前工程目录下参与编译的文件，全部都在git的local changes列表中。
问题
本问题是由于使用sudo安装或执行resource-center-cli命令。
而在使用命令执行编译时，webpack的编译过程会读取和更新文件信息，在此过程中使用sudo权限改写更新后的文件读写权限模式，导致git认为文件发生了更新。
解决
使用命令，将全局的resource-center-cli脚手架进行权限模式修改。
示例中的resource-center-cli目录仅供参考，实际目录须以开发者的npm全局node_modules目录为准
sudo chmod -R 777 /usr/local/lib/node_modules/@cvte/resource-center-cli如果是本地使用nvm调整版本，则全局node_modules路径会有不同
sudo chmod -R 777 /Users/${本地用户名称}/.nvm/versions/node/v${当前使用node的版本号}/lib/node_modules/@cvte/resource-center-cli工程中存在多个antd版本时
问题
本问题是由于CSB工程中使用了@cvte/common-select库，该库中使用了antd的3.x版本，而该工程的node_modules下安装了antd的4.x版本。
解决
修改CSB工程中的webpack_override.js文件内容如下：
// 其他代码
// 确认是否有加node_modules目录的别名
if (!config.resolve.alias['~modules']) {
config.resolve.alias['~modules'] = path.join(__dirname, './node_modules');
}
// 其他代码
new webpack.container.ModuleFederationPlugin({
// 其他代码
shared: {
// 其他代码
'~modules/antd': {
eager: true,
shareKey: 'antd',
version: packageJson['dependencies']['antd'], // 此处获取工程中package.json中安装的antd版本
}
}
})
antd3.x编译报错
工程中使用版本低于antd@3.26.20"">`antd@3.26.20`，编译时报错
Error: Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon).问题
antd@3.x"">`antd@3.x的./components/version/index.tsx文件中引入package.json`的内容使用了解构的方式，导致ts编译时无法正确解析该语法
问题的官方issue记录见此：👉 github - ant-design
解决
升级antd依赖版本至antd@3.26.20"">`antd@3.26.20`
antd缺少全局变量
使用@cvte/wuli-antd@1.4.2-0及其以上的较新版本时
问题
@cvte/wuli-antd@1.4.2-0 ～ @cvte/wuli-antd@1.4.2-17的版本内部使用antd的样式库时，没有完全引入样式变量，导致在编译过程webpack忽略将必要的全局变量文件加入编译依赖树
解决
推荐方案：
资源工程升级为@cvte/wuli-antd@1.4.2-18
在资源工程下新增文件webpack.config.rc.js，让webpack的配置内容进行一次覆盖
使用该特性，须使本地脚手架@cvte/resourec-center-cli版本>=1.4.2
function override(config) {
// 替换less文件的配置
if (config.module.rules && config.module.rules.length) {
const styleLoader = config.module.rules.find((p) => p.test.toString().includes('.less$'));
if (styleLoader) {
styleLoader.use = (styleLoader.use || []).map((v) => {
if (Object.prototype.toString.call(v) === '[object Object]' && v?.loader?.includes('less-loader')) {
return {
...v,
options: {
...(v?.options || {}),
lessOptions: {
...(v?.options?.lessOptions || {}),
modifyVars: {
...(v?.options?.lessOptions?.modifyVars || {}),
'root-entry-name': 'default',
},
},
},
};
}
return v;
});
}
}
return config;
}
module.exports = override;
工程中存在多个axios版本时
请求无法发起，在前端的拦截器中就抛出报错。
问题
本问题是由于接入工程中使用了较多不同版本的axios库，导致全局的请求实例不唯一，且不同版本间的请求拦截器有冲突。
解决
修改接入工程中的webpack_override.js文件内容如下：
// 其他代码
const packageJson = require('./package.json')
// 其他代码
new webpack.container.ModuleFederationPlugin({
// 其他代码
shared: {
// 其他代码
'axios': {
eager: true,
singleton: true,
version: packageJson['dependencies']['axios'], // 此处获取工程中package.json中安装的axios版本，建议固定版本
}
}
})
共享依赖版本异常
问题
在宿主应用工程webpack_override.js文件中shared共享的模块，在运行过程中出现版本缺失导致。
解决
本案例中为react出现版本冲突
修改宿主应用工程的webpack_override.js或webpack.config.js中关于react和react-dom的共享配置
{
react: {
eager: true,
singleton: true,
strictVersion:true,
version:packageJson.dependencies.react,
},
'react-dom': {
eager: true,
singleton: true,
strictVersion:true,
version:packageJson.dependencies['react-dom'],
}
}共享依赖版本冲突
问题
宿主应用工程下共享依赖的版本配置设置为requiredVersion，同时远端资源共享的依赖版本为其他版本，导致版本冲突
解决
第一种：修改远端资源的共享配置
修改宿主应用工程的rc.exposes.js中关于依赖的共享配置
{
shared: {
react: {
isSingleton: true,
version: '17.0.2',
},
}
}第二种：修改宿主应用工程的共享配置
修改宿主应用工程的webpack_override.js或webpack.config.js中关于依赖的共享配置
{
react: {
eager: true,
singleton: true,
strictVersion:true,
version:packageJson.dependencies.react,
}
}应用和依赖资源共享版本不一致
问题
主应用工程热更新时，页面报出webpack的运行时异常内容：
Shared module is not available for eager consumption: webpack/sharing/consume/default/antd/antd?58e5
解决
该异常一般是由于模块B共享的依赖库版本与主应用A共享的依赖库版本不一致导致的。
在该案例中，主应用A使用的antd版本为2.23.0；模块B使用的antd版本为2.24.8；
第一种方案：
升级主应用A的依赖即可解决问题：npm install antd@2.24.8；
第二种方案：
也可以通过移除模块B的antd版本声明
export default {
// 其他代码
shared: {
// 其他代码
antd: {
isSingleton: true,
// version: '4.24.8', // 移除`antd`版本声明
},
}
}最后编辑：袁子涵 更新时间：2025-04-18 15:27
