Vue components cannot be loaded through import when webpack compiles

version

9.2.8

problem

The following error occurs when I package my project through webpack

 ERROR in /Users/xinhua/Documents/demoSpace/blog/src/plugins/simple_toast/src/index.ts
./src/index.ts 2:18-31
[tsl] ERROR in /Users/xinhua/Documents/demoSpace/blog/src/plugins/simple_toast/src/index.ts(2,19)
      TS2307: Cannot find module './toast.vue' or its corresponding type declarations.

ERROR in /Users/xinhua/Documents/demoSpace/blog/src/plugins/simple_toast/src/toast.vue.ts
2:23-40
[tsl] ERROR in /Users/xinhua/Documents/demoSpace/blog/src/plugins/simple_toast/src/toast.vue.ts(2,24)
      TS2307: Cannot find module './img/close.png' or its corresponding type declarations.

ERROR in /Users/xinhua/Documents/demoSpace/blog/src/plugins/simple_toast/src/toast.vue.ts
5:21-22
[tsl] ERROR in /Users/xinhua/Documents/demoSpace/blog/src/plugins/simple_toast/src/toast.vue.ts(5,22)
      TS7006: Parameter 'n' implicitly has an 'any' type.

3 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

What is expected?

compile normally

configuration information

webpack config

module: {
        rules: [{
            test: /\.vue$/, loader: "vue-loader", options: {
                esModule: true
            }
        },
        {
            test: /\.css$/,
            use: ["style-loader", "css-loader"],
        },
        {
            test: /\.js$/,
            loader: "babel-loader",
        },
        {
            test: /\.png|jpg|jpeg|svg$/,
            loader: "url-loader",
            options: {
                limit: 1024 * 20
            }
        },
        {
            test: /\.ts$/,
            use: ["babel-loader", {
                loader: "ts-loader",
                options: { appendTsSuffixTo: [/\.vue$/] }
            }],
            exclude: /node_modules/
        }]
    },
    resolve: {
        alias: {
            "@": path.resolve(__dirname,"src")
        },
        extensions: ['.ts', '.js'],
    },
    plugins: [
        new VueLoaderPlugin()
    ]

tsconfig.json

{
  "include": [
    "src/**/*.ts",
    "src/toast.vue"
  ],
  "exclude": [
    "src/types/*.d.ts",
    "src/shims-vue.d.ts"
  ],
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "outDir": "./dist/",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": true,
    "skipLibCheck": true
  }
}

package.json

"devDependencies": {
    "@vue/compiler-sfc": "^3.2.33",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.2.8",
    "typescript": "^4.5.5",
    "url-loader": "^4.1.1",
    "vue": "^3.2.31",
    "vue-loader": "^17.0.0",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2"
  },

Start by reproducing the webpack build using the configuration in the issue and inspect src/index.ts, toast.vue.ts, toast.vue, and img/close.png. Compare the TypeScript, Vue loader, and asset-resolution errors with tsconfig.json and package.json. Done means the project compiles normally through webpack without these errors.