vue3 專案維護踩雷紀錄 error ‘defineProps’ is not defined no-undef

Willy
Aug 2, 2023

--

最近在維護幾個月前的專案時build的時候遇到了一個錯誤訊息:

 error  'defineEmits' is not defined  no-undef

而緣由是早先使用defineProps及defineEmits的時候都會從vue import進來,但其實在setup scope中,是沒有必要的,,所以就趁著這次一起把所有import defineProps及defineEmits的code都修掉。

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
url: {
type: String,
default: () => ''
}
})

const emit = defineEmits({
'changeSize': (_key: number) => true
})

</script>

而開開心心修掉所有多餘的code覺得自己很棒的時候,build的時候就出現了這個錯誤。

經過幾番搜尋還調整eslint 版本後,又降回原本版本,才發現只要調整.eslintrc.js 這支檔案即可;只要在rules的地方加上’no-undef’: ‘off’就大功告成了。

module.exports = {
rules: {
'no-undef': 'off',
}
}

而eslint 中no-undef 又是做什麼用的呢?

詳情可以看這裡,簡單來說就是: 此規則可幫助你檢查漏寫的參數名;所以以往會import defineProps及defineEmits ,eslint 可以判斷是從哪邊引用的,由於後面都省略了這個部分,所以eslint會覺得你憑空生出了defineProps及defineEmits,所以加以警告。

不過關閉no-undef就衍生出另一個問題了,假如你真的忘記先宣告某些參數就使用它,也就不會再提醒了,所以這方面要自己小心;只能再等待相對應的解法出來了。

--

--

Willy
Willy

Written by Willy

前端修練筆記本,記錄一些踩雷及學習過程,希望能順便幫助一些,在學習或開發路上卡關的人們。

No responses yet