fork-ts-checker-webpack-plugin: `Module has no default export` error with Vue 3 `script setup` components in v6.3.5

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

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 6
Comments: 16

Commits related to this issue

fix: support "setup" attribute in <script> tag in vue 3 In Vue 3, when <script> tag has "setup" attribute, SFC parser assigned script block to a separate field called "scriptSetup" ✅ Closes: #668 — committed to TypeStrong/fork-ts-checker-webpack-plugin by piotr-oles 3 years ago
fix: support "setup" attribute in <script> tag in vue 3 In Vue 3, when <script> tag has "setup" attribute, SFC parser assigned script block to a separate field called "scriptSetup" ✅ Closes: #668 — committed to TypeStrong/fork-ts-checker-webpack-plugin by piotr-oles 3 years ago
fix: support "setup" attribute in <script> tag in vue 3 In Vue 3, when <script> tag has "setup" attribute, SFC parser assigned script block to a separate field called "scriptSetup" ✅ Closes: #668 — committed to TypeStrong/fork-ts-checker-webpack-plugin by piotr-oles 3 years ago

Most upvoted comments

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},
  }[],
}

johnsoncodehk on Oct 20, 2021

Publish in 0.29, see:

johnsoncodehk on Nov 7, 2021

Hey, I am facing the exact same issue using @vue/composition-api in vue2. I am still in the migration process from options-api, playing with it this seems to not produce any errors

<script setup lang='ts'>
// code here
</script>

<script lang="ts">
export default {};
</script>

cenoroid on Mar 20, 2022

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 😉

cexbrayat on Oct 20, 2021

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

cexbrayat on Oct 20, 2021