typescript - webpack kunde inte importera App.vue eller annan Vue-komponent

Jag skapar för närvarande ett webpack-baserat projekt och lägger till Vue3 med TypeScript. Men just nu stöter jag på problemet som är TS2307: Cannot find module './App.vue' or its corresponding type declarations.

shsims-vue.d.ts är för närvarande placerad under src-mappen, och den genereras av standardinställningen.

/* eslint-disable */
import VueRouter, { Route } from 'vue-router'

declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component

}

Detta är min tsconfig.json

{
    "compilerOptions": {
      "target": "esnext",
      "module": "esnext",
      "strict": true,
      "jsx": "preserve",
      "importHelpers": true,
      "moduleResolution": "node",
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "sourceMap": true,
      "baseUrl": ".",
      "types": [
        "webpack-env"
      ],
      "paths": {
        "@/*": [
          "src/*"
        ]
      },
      "lib": [
        "esnext",
        "dom",
        "dom.iterable",
        "scripthost"
      ]
    },
    "include": [
      "src/**/*.ts",
      "src/**/*.tsx",
      "src/**/*.vue",
      "tests/**/*.ts",
      "tests/**/*.tsx"
, "src/shims-vue.d.ts"    ],
    "exclude": [
      "node_modules"
    ]
  }

Här är min webpack-konfigurationsfil

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { VueLoaderPlugin } = require('vue-loader')
const utils = require('./utils')
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/main.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.[hash].bundle.js'
    },

    resolve: {
        extensions: ['.ts', '.js', '.vue', '.json'],
        alias: {
            'vue': '@vue/runtime-dom'
        }
    },
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        port: 9000,
        hot: true
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                },
                exclude: /node_modules/,
            },
            {
                test: /\.s[ac]ss$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
            },
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.png/,
                type: 'asset/resource'
            },
            {
                test: /\.vue$/,
                use: {
                    loader: "vue-loader",
                }
            },
        ]
    },
    // to see the source code in browser 
    devtool: 'source-map',
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            filename: 'main.[hash].css'
        })
    ]
}

I en annan komponent stöter vi också på detta fel, typ ingen aning om hur detta hände och hur man löser det. Vänligen ge lite klarhet i detta. Tack.