Vue components cannot be loaded through import when webpack compiles

[873550602]

version

1.66.2

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"
  },

[vue-bot]

Hello, thank you for taking time filling this issue!

However, we kindly ask you to use our Issue Helper when creating new issues, in order to ensure every issue provides the necessary information for us to investigate. This explains why your issue has been automatically closed by me (your robot friend!).

I hope to see your helper-created issue very soon!