Vue3 <script setup>结合TypeScript出现TS1192无默认导出错误

问题描述 #

正在将项目从Vue2迁移至Vue3，采用TypeScript编写、Laravel Mix构建。IDE开发无异常，但执行npm run development时出现以下错误：

ERROR in ../parentComponent.vue.ts
6:7-12
[tsl] ERROR in ../parentComponent.vue.ts(6,8)
TS1192: Module '"../childComponent.vue"' has no default export.

执行npm run production则无此问题。

已尝试的解决方案：

• 在tsconfig.json中设置"allowSyntheticDefaultImports": true
• 在vue-shim.ts中添加组件声明：

declare module '*.vue' {
  import type { DefineComponent } from 'vue';

  const component: DefineComponent<{}, {}, any>;
  export default component;
}

目前唯一能消除错误的方式是在parentComponent中使用import * as childComponent，但会导致组件无法正常工作。

明确使用<script setup>的组件不存在默认导出，现无法找到有效解决办法。

依赖配置 #

package.json 部分依赖 #

开发依赖：

"laravel-mix": "^6.0.0",
"laravel-mix-purgecss": "^6.0.0-beta.0",
"typescript": "^4.3.2",
"vue-loader": "^16.8.3"

生产依赖：

"vue": "^3.1.0-0"

配置文件 #

webpack.mix.js #

mix
  .copy('resources/js/ga.js', 'public/js')
  .copy('resources/js/hotjar.js', 'public/js')
  .ts('resources/js/app.ts', 'public/js').vue()
  .babelConfig({
    plugins: ['@babel/plugin-syntax-dynamic-import'],
  })
  .webpackConfig({
    plugins: [
      new MinifyHtmlWebpackPlugin({
        afterBuild: true,
        src: './storage/framework/views',
        dest: './storage/framework/views',
        ignoreFileNameRegex: /\.(gitignore|php)$/,
        ignoreFileContentsRegex: /(<?xml version)|(mail::message)/,
        rules: {
          collapseBooleanAttributes: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true,
          removeComments: true,
          minifyJS: true,
        },
      }),
      new ESLintPlugin({
        extensions: ['js', 'vue', 'ts'],
        exclude: [
          '/node_modules/',
          'node_modules',
          '/cypress/**/*.spec.ts',
        ],
      }),
    ],
    resolve: {
      alias: {
        vue: '@vue/compat',
      },
    },
  })
  .extract()
  .sass('resources/sass/app.scss', 'public/css', {
    sassOptions: {
      sourceMap: true,
    },
  })
  .version();

tsconfig.json #

{
    "compilerOptions": {
        /* Visit https://aka.ms/tsconfig.json to read more about this file */

        /* Basic Options */
        "target": "ES2020" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
        "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,

        /* Strict Type-Checking Options */
        "strict": true /* Enable all strict type-checking options. */,
         "noImplicitAny": false,                 /* Raise error on expressions and declarations with an implied 'any' type. */

        /* Module Resolution Options */
         "baseUrl": ".",                       /* Base directory to resolve non-absolute module names. */
         "paths": {
             "@/*": ["resources/js/*"]
         },                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
        "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
        "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,

        /* Experimental Options */
        "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
        
        /* Advanced Options */
        "skipLibCheck": true /* Skip type checking of declaration files. */,
        "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
    },
    "include": [
      "resources/js/**/*.ts",
      "node_modules/cypress/types/mocha/index.d.ts"
    ],
    "exclude": ["node_modules", "cypress"]
}

内容的提问来源于stack exchange，提问作者jufg