Vue3 compiler: `defineProps` are referencing locally declared variables报错处理

背景

在setup里声明了一个变量，并且在defineProps初始化的时候使用了这个本地变量。示例：

<script setup>
const foo = 'bar'
const props = withDefaults(defineProps<Props>(), {
  pagination() {
    return {
      foo
    }
  }
})
</script>

为什么？

首先我们明白SFC有两个scope，一个module scope，一个是setup scope。在setup scope 声明变量，因为defineProps和defineEmit将从setup scope提升module scope了，从而无法引用setup scope的变量，所以vue判定这里会有问题。

解决方案有两个

1.在SFC里再定义一个module scope来存放这个变量
2.在setup scope通过另外一个文件引入这个变量。

module scope

<script>
const foo = 'bar'
</script>

setup scopes

<script setup>
import { foo } from './constant'
const props = withDefaults(defineProps<Props>(), {
  pagination() {
    return {
      foo
    }
  }
})
</script>