เรื่องนี้มาจากตอนช่วยขยับ Nuxt 3 > 4 และเปลี่ยน UI Lib จาก Vuetify > Nuxt UI Pro (เค้าประกาศแจกฟรี 55) แล้วที่นีตอนทดสอบ
- bun run dev ทำได้ได้
- bun run build ไม่มี Error อะไร
พอลองปล่อยให้เข้า Flow GitHub Action CI/CD สิ่งที่ได้
Error Code 500 Error null is not an object (evaluating 'currentRenderingInstance.ce')
เคสนี้ตอนแรก ผมหลงคิดว่ามาจาก Dockerfile ต้องขยับอะไรจาก Nuxt 3 > 4 หรือ ป่าว ติดเวลาประมาณนึงเลย แล้วที่นี้่เลยลองถอย มาลอง Run ตัว build bun .output/server/index.mjs เจอ Error เหมือนกัน เลยลองหา Error เพิ่มเติมก่อน
currentRenderingInstance.ce คือ อะไร
ตัวแปรที่ใช้งานใน Vue3 เพื่อบอกว่าตอนนี้อยู่ในตัว Vue lifecycle phase ไหน แล้ว
ตั้งสมมติฐาน
แล้วที่มัน Null อันนี้ใช้สมมติฐานของ dotnet นะ มี Component ที่ใช้ Vue แล้วต่าง Version กันเลยทำให้ currentRenderingInstance null
ตรวจสอบสมมติฐาน + แก้ไข
# Linux bun pm ls --all | grep vue # PowerShell bun pm ls --all | Select-String 'vue'
ผลลัพธ์ที่ได้ พบว่าบาง Dependency Ref Vue ไว้เหมือนกัน
├── @floating-ui/[email protected] ├── @iconify/[email protected] │ └── [email protected] │ ├── @vue/[email protected] │ │ └── @vue/[email protected] │ ├── @vue/[email protected] │ │ ├── @vue/[email protected] │ │ ├── @vue/[email protected] │ ├── @vue/[email protected] │ │ ├── @vue/[email protected] │ │ └── @vue/[email protected] │ └── @vue/[email protected] │ └── @vue/[email protected] │ └── [email protected] ├── @tanstack/[email protected] ├── @tanstack/[email protected] ├── @unhead/[email protected] ├── @vitejs/[email protected] ├── @vitejs/[email protected] ├── @vue-macros/[email protected] │ ├── @vue/[email protected] │ │ ├── @vue/[email protected] │ │ ├── @vue/[email protected] │ │ ├── @vue/[email protected] ├── @vue/[email protected] ├── @vue/[email protected] ├── @vue/[email protected] │ └── @vue/[email protected] │ ├── @vue/[email protected] │ ├── @vue/[email protected] │ ├── @vue/[email protected] ├── @vue/[email protected] │ ├── @vue/[email protected] ├── @vue/[email protected] │ └── @vue/[email protected] ├── @vue/[email protected] │ ├── @vue/[email protected] ├── @vue/[email protected] │ └── @vue/[email protected] ├── @vue/[email protected] ├── @vue/[email protected] ├── @vue/[email protected] ├── @vue/[email protected] ├── @vue/[email protected] │ ├── @vue/[email protected] │ │ └── @vue/[email protected] ├── @vue/[email protected] │ └── @vue/[email protected] ├── @vue/[email protected] │ └── @vue/[email protected] ├── @vue/[email protected] │ └── @vue/[email protected] ├── @vue/[email protected] │ └── @vue/[email protected] ├── @vue/[email protected] ├── @vue/[email protected] ├── @vueuse/[email protected] ├── @vueuse/[email protected] ├── @vueuse/[email protected] ├── @vueuse/[email protected] ├── [email protected] │ ├── [email protected] │ │ ├── @vue/[email protected] │ │ │ └── @vue/[email protected] │ │ ├── @vue/[email protected] │ │ │ ├── @vue/[email protected] │ │ │ ├── @vue/[email protected] │ │ ├── @vue/[email protected] │ │ │ ├── @vue/[email protected] │ │ │ └── @vue/[email protected] │ │ └── @vue/[email protected] │ │ └── @vue/[email protected] │ └── [email protected] │ │ │ ├── @vue/[email protected] │ │ │ │ ├── @vue/[email protected] │ │ │ ├── @vue/[email protected] │ │ │ │ └── @vue/[email protected] │ │ │ ├── @vitejs/[email protected] │ │ │ ├── @vitejs/[email protected] │ │ │ │ └── @vue/[email protected] │ │ │ │ ├── @vue/[email protected] │ │ │ │ └── @vue/[email protected] │ │ ├── @unhead/[email protected] │ │ ├── @vue/[email protected] │ │ ├── [email protected] │ │ │ ├── @vue-macros/[email protected] │ │ └── [email protected] │ ├── @vueuse/[email protected] │ │ ├── @vueuse/[email protected] │ │ └── [email protected] │ │ ├── @vue/[email protected] │ │ │ └── @vue/[email protected] │ │ ├── @vue/[email protected] │ │ │ ├── @vue/[email protected] │ │ │ ├── @vue/[email protected] │ │ ├── @vue/[email protected] │ │ │ ├── @vue/[email protected] │ │ │ └── @vue/[email protected] │ │ └── @vue/[email protected] │ │ └── @vue/[email protected] │ └── @vueuse/[email protected] │ └── [email protected] │ ├── @vue/[email protected] │ │ └── @vue/[email protected] │ ├── @vue/[email protected] │ │ ├── @vue/[email protected] │ │ ├── @vue/[email protected] │ ├── @vue/[email protected] │ │ ├── @vue/[email protected] │ │ └── @vue/[email protected] │ └── @vue/[email protected] │ └── @vue/[email protected] ├── [email protected] ├── [email protected] │ ├── @vue/[email protected] │ │ ├── @vue/[email protected] │ │ ├── @vue/[email protected] │ │ ├── @vue/[email protected] ├── [email protected] │ ├── @vueuse/[email protected] │ │ ├── @vueuse/[email protected] │ │ └── @vueuse/[email protected] │ └── [email protected] │ ├── @vue/[email protected] │ │ └── @vue/[email protected] │ ├── @vue/[email protected] │ │ ├── @vue/[email protected] │ │ ├── @vue/[email protected] │ ├── @vue/[email protected] │ │ ├── @vue/[email protected] │ │ └── @vue/[email protected] │ └── @vue/[email protected] │ └── @vue/[email protected] ├── [email protected] │ └── @vue/[email protected] │ ├── @vue/[email protected] │ └── @vue/[email protected] ├── [email protected] ├── [email protected] │ └── @vue/[email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected]
ที่นี่ต้องหาทาง Lock Version ให้เหมือนกัน มีหลายท่า
📌 package.json override ไป
// package.json
{
"trustedDependencies": ["vue"],
"overrides": {
"vue": "latest"
}
}📌 แล้วส่วนใน Nuxt ตัว Config ของ Vite บอกให้มันทำ dedupe
import { resolve } from 'path'
export default defineNuxtConfig({
// ...
vite: {
resolve: {
alias: { 'vue': resolve(__dirname, 'node_modules/vue') },
dedupe: ['vue']
},
// ...
},
})จากนั้นทดสอบอีกรอบครับ Error หายไปแล้ว
Reference
- https://github.com/vuejs/core/issues/1173
- https://github.com/nuxt/ui/issues/2622
- https://www.answeroverflow.com/m/1257670995549098184
Discover more from naiwaen@DebuggingSoft
Subscribe to get the latest posts sent to your email.
