`Module has no default export` error with Vue 3 `script setup` components in v6.3.5

[cexbrayat]

Current behavior

Thank you for your work for a better support of script setup

When upgrading an application to use v6.3.5, we encounter the following error with Vue 3 components using script setup:

ERROR in src/App.vue:7:24
TS2306: File '/Users/ced-pro/Code/test/vue-cli-tests/no-default-export/src/components/HelloWorld.vue.ts' is not a module.
     5 |
     6 | <script setup lang="ts">
  >  7 | import HelloWorld from './components/HelloWorld.vue';
       |                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     8 | </script>
     9 |
    10 | <style>

ERROR in src/main.ts:2:8
TS1192: Module '"/Users/ced-pro/Code/test/vue-cli-tests/no-default-export/src/App.vue"' has no default export.
    1 | import { createApp } from 'vue'
  > 2 | import App from './App.vue'
      |        ^^^
    3 |
    4 | createApp(App).mount('#app')

Expected behavior

Previously, with v6.3.4, there was no error.

Steps to reproduce the issue

This occurs in new projects using Vue CLI v5, with Vue 3 and TypeScript, blocking new CLI users.

npx -p @vue/cli@next vue create no-default-export --inlinePreset '{"useConfigFiles": true,"plugins": {"@vue/cli-plugin-typescript": {"classComponent": false}},"vueVersion": "3"}'
cd no-default-export
# switch components to `script setup`
yarn serve

Issue reproduction repository

A simple reproduction is available at https://github.com/cexbrayat/no-default-export

yarn
yarn serve

If you change the resolution in package.json to use v6.3.4, then yarn serve works again.

Environment

• fork-ts-checker-webpack-plugin: 6.3.5
• typescript: 4.1.5 (same issue with 4.3 and 4.4)
• webpack: 5.59.0
• os: MacOS

[cexbrayat]

Reading through commit 2cfe45f, I realize that your example of script setup component is inaccurate: script setup component have a completely different syntax, with no export.
See https://github.com/cexbrayat/no-default-export/blob/master/src/App.vue for an example, or the official documentation https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup

[cexbrayat]

cc @johnsoncodehk (developer of Volar) and @pikax (who knows Vue TypeScript arcane better than me) as they may have an opinion on what would be best here

[piotr-oles]

Thanks for the feedback - I'm not a Vue developer so pardon my ignorance :) Feel free to open a PR to fix it ;)
If you don't have time, I will take a look at this probably in a few days

[cexbrayat]

TBH I'm not sure I know enough to help here, and this might be more complicated than you expect. script setup components have macros like defineProps that are available without importing them for example. So this is valid TS:

<script setup lang="ts">
defineProps<{ msg: string }>()
const count = 1;
</script>

Some developers might also use the experimental sugar ref syntax.

I pinged the Vue team to have more inputs on what you can do. In the meantime, maybe you could revert the changes and release a new patch, as this breaks new Vue CLI users? No type checking is probably better than broken type checking 😉

[johnsoncodehk]

The correct type checking of <script> + <script setup> is more complicated than expected, but I have implemented it in the Volar project. If you want, I can try to extract a public function.

The API may like this:

declare function parseTypeCheckableCode(scriptCode: string, scriptSetupCode: string): {
  generatedCode,
  scriptMappings: {
    scriptTextRange: { start: number, end: number},
    generatedCodeTextRange: { start: number, end: number},
  }[],
  scriptSetupMappings: {
    scriptSetupTextRange: { start: number, end: number},
    generatedCodeTextRange: { start: number, end: number},
  }[],
}

[piotr-oles]

@johnsoncodehk Oh, great, it would be very helpful!

[johnsoncodehk]

Publish in 0.29, see:

• https://github.com/johnsoncodehk/volar/blob/master/packages/vue-code-gen/src/index.ts
• https://www.npmjs.com/package/@volar/vue-code-gen