`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

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:13

Top GitHub Comments

5reactions

johnsoncodehkcommented, Oct 20, 2021

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

4reactions

johnsoncodehkcommented, Nov 7, 2021

Publish in 0.29, see:

Top Results From Across the Web

vue.js - Vue | Module has no default export - Stack Overflow

With script setup syntax there's no need to add export default in your script, just add the setup attribute to your script:

vue/no-export-in-script-setup

This rule warns ES module exports in <script setup> . The previous version of <script setup> RFC used export to define variables used...

_vue__webpack_imported_mod...

vue __WEBPACK_IMPORTED_MODULE_0__ is not a constructor ... When using Webpack 3.5 + UglifyES + React Loadable, some of my default exports via import()...

Changelog - Cypress Documentation

Fixed an issue with Angular Component Testing where urls within SASS/SCSS files were not being correctly resolved which could result in incomplete styling....

Firebase JavaScript SDK Release Notes - Google

Updated firebase/[product] entry point bundles to conform to Node.js ES module specifications. Realtime Database. Added support for startAfter and endBefore ...