Mpx框架中编译报错

[ff77645]

tdesign-miniprogram 版本

1.8.3

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

在Mpx框架中使用时报错:

ERROR in ./node_modules/tdesign-miniprogram/miniprogram_dist/common/template/badge.wxml?extract&hasComment=false&hasScoped=false&index=0&isNative=false&isStatic&mpx  
=mpx_processed&packageRoot=manage&type=template (./node_modules/@mpxjs/webpack-plugin/lib/record-loader.js!./node_modules/@mpxjs/webpack-plugin/lib/wxml/loader.js!./n  
ode_modules/@mpxjs/webpack-plugin/lib/template-compiler/index.js!./node_modules/tdesign-miniprogram/miniprogram_dist/common/template/badge.wxml?extract&hasComment=fal  
se&hasScoped=false&index=0&isNative=false&isStatic&mpx=mpx_processed&packageRoot=manage&type=template)
  Module Error (from ./node_modules/@mpxjs/webpack-plugin/lib/template-compiler/index.js):
  [template compiler][D:\projectsnew\fruit-mall-admin\node_modules\tdesign-miniprogram\miniprogram_dist\common\template\badge.wxml?extract&hasComment=false&hasScoped=  
false&index=0&isNative=false&isStatic&mpx=mpx_processed&packageRoot=manage&type=template]: Invalid render function generated by the template, please check!
Error code:
  (color || '');
  (content || '');
  (count || 0);
  (dot || false);
  (maxCount || 99);
  (offset || []);
  (shape || 'circle');
  (showZero || false);
  (size || 'medium');
  ((class)+" "+(tClass));
  (tClassContent);
  (tClassCount);

基础库版本

No response

补充说明

经排查发现导致报错的原因是: src/common/template路径下的模版页面内使用到了 class 关键字作为响应性变量,从而导致babel parser 时报错。
咱这边就是说看能不能对变量名做一下修改？

[github-actions]

👋 @ff77645，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[anlyyao]

@ff77645 hello 方便提供下仓库看看吗？可以先一起探讨下，评估一下Mpx接入tdesign-miniprogram组件库的适配成本。

主要是目前tdesign-miniprogram还是一个原生微信小程序端UI组件库，没有专门去适配/兼容任何跨端框架，我不能保证其在跨端框架中组件功能的完整性。

[ff77645]

@anlyyao 我已经在项目中使用Mpx+tdesign-miniprogram了，暂时没有发现其他的问题；Mpx本身是兼容原生小程序生态的，所以似乎并不需要做其他特殊处理。

仓库地址 这是一个简单的应用示例，
如果直接 npm run serve 的话，将会出现上面贴的错误,
如果删除 node_modules\tdesign-miniprogram\miniprogram_dist\common\template\icon.wxml中的 class 变量，就能正常运行（记得删除项目路径根路径的.cache/缓存目录）。

[anlyyao]

@anlyyao 我已经在项目中使用Mpx+tdesign-miniprogram了，暂时没有发现其他的问题；Mpx本身是兼容原生小程序生态的，所以似乎并不需要做其他特殊处理。

仓库地址 这是一个简单的应用示例， 如果直接 npm run serve 的话，将会出现上面贴的错误, 如果删除 node_modules\tdesign-miniprogram\miniprogram_dist\common\template\icon.wxml中的 class 变量，就能正常运行（记得删除项目路径根路径的.cache/缓存目录）。

感谢提供应用示例，我们会尽快调研看下 Mpx+tdesign-miniprogram 的下组件功能的完整度，并在下个版本中对你提出的问题进行兼容处理，本周大概率没有发版计划，预计最迟下周的 1.8.4 版本可带

[ff77645]

@anlyyao 我已经在项目中使用Mpx+tdesign-miniprogram了，暂时没有发现其他的问题；Mpx本身是兼容原生小程序生态的，所以似乎并不需要做其他特殊处理。
仓库地址 这是一个简单的应用示例， 如果直接 npm run serve 的话，将会出现上面贴的错误, 如果删除 node_modules\tdesign-miniprogram\miniprogram_dist\common\template\icon.wxml中的 class 变量，就能正常运行（记得删除项目路径根路径的.cache/缓存目录）。

感谢提供应用示例，我们会尽快调研看下 Mpx+tdesign-miniprogram 的下组件功能的完整度，并在下个版本中对你提出的问题进行兼容处理，本周大概率没有发版计划，预计最迟下周的 1.8.4 版本可带

好的,拴Q