`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 https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/commit/2cfe45f567e30a56dea4cb5907a0d47e62dae644, 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

[piotr-oles]

I created PR #676 - would be nice if someone with vue project could test these changes. I added some examples to e2e tests but I'm not a vue developer, so I may miss something.

To test it, clone the repo, run yarn install, yarn build and yarn link, and then run yarn link fork-ts-checker-webpack-plugin in your repository.

[piotr-oles]

:tada: This issue has been resolved in version 6.4.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[piotr-oles]

:tada: This issue has been resolved in version 7.0.0-alpha.15 :tada:

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[cenoroid]

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>

[BobbyJonas]

vue 2 ( + ts + composition api) still not works.

[hhhpw]

Sorry,but my project not wroks with version 7.2.13 of fork-ts-checker-webpack-plugin. my codes:

new ForkTsCheckerWebpackPlugin({
            typescript: {
                extensions: {
                    vue: {
                        enabled: true,
                        compiler: '@vue/compiler-sfc',
                    },
                },
            },
        }),

vue file:

<template>
    <div>
        tset {{b}}
    </div>
</template>

<script setup lang="ts">

const b:string = 1;

</script>

no erros exports

[piotr-oles]

I'm dropping support for Vue.js. For the last few years, support for Vue.js has been broken, and the implementation of Vue.js integration was a hacky work-around. Unfortunately, TypeScript doesn't expose an API to do that properly, and while I created a https://github.com/microsoft/TypeScript/issues/38736 on the TypeScript repository, the TypeScript team has other priorities. As I won't have time to support this feature and am receiving justified bug reports, I believe it's better to make it clear that Vue.js is not supported by the plugin instead of pretending that it is.

[filimon-danopoulos-stratsys]

Sad to hear but understandable, in particular with the official tooling for Vue going for a vite-based setup. Does this mean that you will remove the hacky work-around in a future release? It would be nice if you mention this issue when doing so as I still have lots of codebases that depend on it and would need to lock versions.

[BobbyJonas]

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>

try to ignore the TS1192 typescript error in fork-ts-checker-webpack-plugin if you use the nuxt framework:

typescript: {
    // fork-ts-checker-webpack-plugin Configuration
    // https://typescript.nuxtjs.org/guide/lint/#runtime-lint
    // https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#options
    typeCheck: {
      // ignore `no default export` warning when using setup syntax
      issue: { exclude: [{ code: "TS1192" }] },
    },
  },