vue.js - 在使用 Vue 3 的 <script; setup> 与 TypeScript 时，会导致 TS1192 '没有默认导出' 错误

我的项目正在从 Vue 2 迁移到 Vue 3，并使用 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"]
}