最近在做微信小程序的項目,創建好項目后,按官方方式引入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博客?