微信小程序引入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文件中添加配置

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

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博客

相关推荐
说私域6 小时前
人工智能赋能美妆零售数字化转型:基于开源AI大模型的S2B2C商城系统构建
人工智能·小程序·开源·零售
说私域6 小时前
数智化时代下开源AI大模型驱动的新型商业生态构建——基于AI智能名片与S2B2C商城小程序的融合创新研究
人工智能·小程序·开源
SuperherRo10 小时前
Web开发-JS应用&微信小程序&源码架构&编译预览&逆向调试&嵌套资产&代码审计
前端·javascript·微信小程序·源码·逆向
yede10 小时前
微信小程序 - 获取权限
微信小程序·uni-app
黑马源码库miui5208611 小时前
心理咨询法律咨询预约咨询微信小程序系统源码独立部署
微信小程序·小程序·uni-app·php·微信公众平台
有一只柴犬11 小时前
3. 实战(一):Spring AI & Trae ,助力开发微信小程序
人工智能·spring·微信小程序
暮雨哀尘1 天前
微信小程序开发:微信小程序组件应用研究
算法·微信·微信小程序·小程序·notepad++·微信公众平台·组件
狂团商城小师妹1 天前
经销商订货管理系统小程序PHP+uniapp
微信·微信小程序·小程序·uni-app·php·微信公众平台
ckx666666cky1 天前
支付宝关键词排名优化策略:提升小程序曝光的关键
大数据·搜索引擎·小程序·支付宝小程序·支付宝关键词排名优化·支付宝排名优化