vue3始终报错 导入声明只能在模块的顶层使用，请问如何处理？

Question

vue3始终报错 导入声明只能在模块的顶层使用。ts(1473)

<script setup>
//公共函数
import { useTime } from '@/hooks/useTime.js';
const { timestamp_format } = useTime();

//引入 iconfont
import { createFromIconfontCN } from '@ant-design/icons-vue';
const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/c/font_2136286_6jmumc8wu0q.js',
});


</script>

Answer 1

把 这句const { timestamp_format } = useTime(); 放后面

<script setup>
//公共函数
import { useTime } from '@/hooks/useTime.js';

//引入 iconfont
import { createFromIconfontCN } from '@ant-design/icons-vue';

const { timestamp_format } = useTime();

const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/c/font_2136286_6jmumc8wu0q.js',
});


</script>

Answer 2

根据字面意思 你没有想过把这2个的位置换一下？

Answer 3

import 统一放在顶部区域 这是语法要求

Answer 4

按照提示来写呗，把const { timestamp_format } = useTime();放到所有import下面。import都写在顶层。

setup语法糖实际是常规写法的setup(){}，如果中间穿插写import，可能会被解析为：

setup() {
    import xxx from 'xxx'
}

这样当然不行