2026年4月24日 星期五

Vue 引用錯誤: Missing ref owner context. ref cannot be used on hoisted vnodes.

- 錯誤訊息
[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. 

  - 引用前端插件 
Vue: v3 
chart.js: v4+ 
vue-chartjs: v5+ 

  - 說明 
此測試程式是 CDN 方式,以輕前端方式開發,所以手動引用 plug-in。初期猜測是程式中的語法造成此錯誤,但多方 try-error 加上網路上資料後仍不得解。 有中國網友 PO 文提到這個問題,但說明不太清楚還是卡在這個錯誤無法產生圖表。最後心血來潮將 vue-chartjs 引用 ESM 改為一般的 JS 檔案,順利解決。 



    


- 參考資料 
解决vue-chartjs在ESM模块导入时出现的引用错误问题 https://blog.gitcode.com/8eb95d906b3286a46aee671826e0d9f8.html