script-setup: Types need to be imported separately with `import type ....`

[JSerFeng]

Version

3.0.5

Reproduction link

https://github.com/JSerFeng/bug/blob/master/src/App.vue

Steps to reproduce

<script setup lang="ts"> import {Ref} from "vue" </script>

What is expected?

nothing happens

What is actually happening?

Uncaught SyntaxError: The requested module '/node_modules/.vite/vue.js?v=6cc5afeb' does not provide an export named 'Ref'

[LinusBorg]

It's a Bug in the compiler that doesn't differentiate between type exports and runtime exports.

As a workaround, you can use import type { Ref } from 'vue' to import types explicitly as types.

[HcySunYang]

Is it related to vite? vitejs/vite#1661

[LinusBorg]

Don't think so, that issue revolved around runtime exports (unref, openBlock).

There were also comments about the problem with Type exports in the RFC comments that found the same solution/workaround:

vuejs/rfcs#227 (comment)

[HcySunYang]

Oh, the code it generates looks like this:

import {Ref} from 'vue'

export default {
  expose: [],
  setup(__props) {
    return { Ref }
  }
}

But I can't find any way other than list all types through enumeration, or we can consider imports beginning with capital letters as types, but exclude such things as Teleport/ErrorCodes.

[LinusBorg]

Yeah, don't think that would be a reliable heuristic. I don't think the compiler can reliably determine wether or not an import is a Type or a runtime object, so in theory we would have to clean up the imports with Ts somehow before generating the code.

No idea if something like this is even feasable, not really familiar enough with compiler details.

Should we consider this an enhancement rather than a bug as import type works for now, and the RFC is still in flux?

[HcySunYang]

Should we consider this an enhancement rather than a bug as import type works for now, and the RFC is still in flux?

Agree

[zhenzhenChange]

see

• TypeScript type exports fail when type is imported from a module vitejs/vite#731
• How exclude type which export by third library inside output? evanw/esbuild#341 (comment)
• TypeScript parsing bug - cascading issue with exporting of nihilated TS interface evanw/esbuild#314 (comment)

[yoyoys]

This workaround breaks eslint-prettier, so weird.

It's a Bug in the compiler that doesn't differentiate between type exports and runtime exports.

As a workaround, you can use import type { Ref } from 'vue' to import types explicitly as types.

[LinusBorg]

how exaxctly? I use eslint and prettier fine with this.