Vue components cannot be loaded through import when webpack compiles

[873550602]

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

[lucasctd]

@873550602 it seems you are getting the same error as I am. See #1436

If you find any solution, please share it here, it has been bothering me for the last 3 months.

I tried Parcel which seemed to work:

https://parceljs.org/

but it does not load my Inertia Page :V

createInertiaApp({
    title: title => `${title} - ${appName}`,
    resolve: name => require(`./pages/${name}.vue`), // <--- this one
    setup({ el, app, props, plugin }) {
        createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(VuePaycard)
            .use(ElementPlus)
})

InertiaProgress.init({ color: '#4B5563' })

[873550602]

@lucasctd

require cannot use concatenated paths, only static string paths are supported

// ok
require('./pages/test.vue')
// error
const name = "test"
require(`./pages/${name}.vue`)

[lucasctd]

@873550602 it actually works with webpack, I didn't manage to get it working with Parcel though.

Refer to: https://inertiajs.com/client-side-setup