unplugin / unplugin-vue2-script-setup

💡 Bring `<script setup>` to Vue 2.
MIT License
603 stars 39 forks source link

Imports from `<script setup>` throw TS error when used in a second, non-setup `<script>` tag #122

Closed DamianGlowala closed 2 years ago

DamianGlowala commented 2 years ago

Given the following two script blocks in the same component:

<script setup lang="ts">
import { PageLayout } from "~~/types/layouts/PageLayout.enum";

(...)
</script>

<script lang="ts">
export default {
    layout: PageLayout.Default
};
</script>

a TypeScript error is thrown, even though the PageLayout enum is present in the second block:

image

Is the above issue fitting within the scope of this library? If it is, is there a way to remove the TS error (keeping the imports in the first block) rather than disabling ESLint import/first rule, as shown below?

<script lang="ts">
// eslint-disable-next-line import/first
import { PageLayout } from "~~/types/layouts/PageLayout.enum";

export default {
    layout: PageLayout.Default
};
</script>
xiaoxiangmoe commented 2 years ago

You should disable type checking in vue-cli. see https://github.com/antfu/unplugin-vue2-script-setup/blob/main/examples/vue-cli/vue.config.mjs#L15-L16

Also, I think you can disable rule import/first temporary and create a PR on eslint-plugin-vue.

DamianGlowala commented 2 years ago

Thanks for the pointer, it did work for Nuxt by adding typeCheck: false, as per the below: https://typescript.nuxtjs.org/guide/setup/#typecheck