最近在做微信小程序的项目,创建好项目后,按官方方式引入TDesign组件,但还是一直提示报错(Component is not found in path "miniprogram_npm/tdesign-miniprogram/button/button" (using by "pages/login/login").(env: macOS,mp,1.06.2412050; lib: 3.7.11))。

后面解决了,项目详情勾选上将JS编译成ES5。问题原因估计是我使用的小程序模板是TS+Sass的官方模板,

用typescript,打包后小程序工具默认打包成CommonJS模式,导致找不到文件。
官方安装步骤:
1、安装
npm i tdesign-miniprogram -S --production
安装完之后,需要在微信开发者工具中对 npm 进行构建:工具 - 构建 npm
。
构建时会出现NPM packages not found
字样
2、构建前的配置
在project.config.json文件中添加配置
TypeScript
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
],

在tsconfig.json文件中添加配置
TypeScript
"module": "ESNext", // CommonJS修改为 ESNext
"paths": {
"tdesign-miniprogram/*":["./miniprogram/miniprogram_npm/tdesign-miniprogram/*"]
}

3、修改 app.json
将 app.json
中的 "style": "v2"
移除。
因为 该配置 表示启用新版组件样式,将会导致 TDesign 的组件样式错乱。

此时这样之后,界面能显示,但控制台还是报错,

4、重要的一步骤
微信开发者工具,项目详情勾选上将JS编译成ES5,勾选上后就不报错了,这一步很重要

参考文献:
1、 TDesign