微信小程序引入TDesign组件后报错一直提示路径不对(Component is not found in path)的解决方法

最近在做微信小程序的项目,创建好项目后,按官方方式引入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文件中添加配置

    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ],

 

在tsconfig.json文件中添加配置

"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

2、Component is not found in path “..../miniprogram_npm/@vant/weapp/button/index“ (using by “pages/inde-CSDN博客

3、正确使用微信小程序组件库,解决报错Component is not found in path-CSDN博客 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

QC班长

班长有话说:要是有瓶水喝就好了

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值