When the second script tag uses 'export default', it will result in a ts(2448) error

[eric-gitta-moore]

Vue - Official extension or vue-tsc version

latest

VSCode version

latest

Vue version

3.5.25

TypeScript version

5.9.3

System Info

in vueuse playground.

package.json dependencies

{}

Steps to reproduce

playground

<script setup lang="ts">
import { ref } from 'vue';

defineProps<{ msg: string }>();

const count = ref(eee);
</script>

<script lang="ts">
export default {
  name: '1212'
}
export const eee = 1
</script>

<template>
  <div class="flex items-center justify-center w-screen h-screen">
    {{ count }}
  </div>
</template>

What is expected?

No longer display the ts(2448) error

What is actually happening?

Block-scoped variable 'eee' used before its declaration.ts(2448)
App.vue(13, 14): 'eee' is declared here.

Link to minimal reproduction

https://playground.vueuse.org/?vueuse=13.9.0#eNp9UstOwzAQ/JWVLwUJUrXApQQkQBzgAAg4WkJRugkujm157RIU5d/ZOG15COGTvTOemV27ExfOZeuIYiFyKr1yAQhDdKALU59JEUiKc2lU46wP0IHHCnqovG1gwtcmp9JIs8RKGXzw1lHeQUP1Aih4ZWroz/f2E6W0hgKUNpoAZ4PKHiIOUD4dbdmED5sIP82xTebsUkTNIaQBMEWDC5jM5rP5RJp+Rxp9WJtdZr/VAzZOFwH5BJAv1RpKXRCxU6WxBcU4HZZoAnpYRQqq+tge3w9ZCNHA62aTkgGvrtu01XMKlp2yLkP59JubOOBeOFql6mxF1vC0UxdSlLZxSqO/d0FxdCkWY38DVmht329TLfiIB9t6+Yrl2x/1FbVDTYoHj4R+jVLssFD4GsMIXz/dYcv7HdjYZdTM/gd8RLI6DhlH2mU0S479jZfS3qR/wi//TNdtQEPbpoagA7NPfCn471z90/pX3KPsON3jR+YpvqzRD5o8wKPsJJufiP4TNWTtWQ==

Any additional comments?

No response

[eric-gitta-moore]

Interestingly, if export default is moved to the end, there will be no problem at all.

<script setup lang="ts">
import { ref } from 'vue';

defineProps<{ msg: string }>();

const count = ref(eee);
</script>

<script lang="ts">
export const eee = 1
export default {
  name: '1212'
}
</script>

[KazariEX]

This is the expected behavior because the script setup code is generated in export default.

Supporting this use case doesn't bring much benefit; instead, it adds unnecessary complexity to the code.

[eric-gitta-moore]

@KazariEX thx.
However, I found that the compiled code always has <script lang="ts"> preceding <script setup lang="ts">, but TypeScript doesn't consider it this way. There might be some gaps here.

vue/core compiler-sfc:

https://github.com/vuejs/core/blob/25ebe3a42cd80ac0256355c2740a0258cdd7419d/packages/compiler-sfc/src/compileScript.ts#L506-L516

vue lang sever:

language-tools/packages/language-core/lib/codegen/script/index.ts

Lines 52 to 56 in fa61d7f

	if (options.sfc.scriptSetup && options.scriptSetupRanges) {
	if (exportDefault) {
	yield generateSfcBlockSection(options.sfc.script, 0, exportDefault.start, codeFeatures.all);
	yield* generateScriptSetup(options, ctx, options.sfc.scriptSetup, options.scriptSetupRanges);
	}

language-tools/packages/language-core/lib/codegen/script/index.ts

Lines 114 to 116 in fa61d7f

	yield* generateExportDefault(options);
	yield* ctx.localTypes.generate();
	}

It seems that there is an obvious mismatch in the implementation on both sides.

The Vue TypeScript Language Service seems to generate the check files based on the "export default" as the cut-off point.

And compiler-sfc always places <script setup> at the end.

[KazariEX]

Although we are working to align runtime behavior, the codes used for language services and used for runtime cannot be treated the same.

[KazariEX]

If you are interested, you can download the Volar Labs extension to view the generated virtual code structure.