9% setup compilation vue-loader-plugin[webpack-cli] - (VUE.JS 3)

"laravel/framework": "^8.40"

Node Version (node -v): v14.17.0
NPM Version (npm -v): 6.14.13
OS: Windows 10

package.json

"devDependencies": {
        "@vue/compiler-sfc": "^3.1.1",
        "axios": "^0.21",
        "laravel-mix": "^6.0.19",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14"
  },
"dependencies": {
        "@inertiajs/inertia": "^0.9.2",
        "@inertiajs/inertia-vue3": "^0.4.5",
        "vue": "^3.1.1",
        "vue-loader": "^16.2.0"
 }

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Description :

Just installed laravel, inertia.js with vue.js 3 and run npm run dev I am getting this error:

9% setup compilation vue-loader-plugin[webpack-cli] TypeError: The 'compilation' argument must be an instance of Compilation

Capture

Steps To Reproduce:

Installed fresh Laravel 8 composer require inertiajs/inertia-laravel

Create app.blade.php file in resources/views directory and add this

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>
  </head>
  <body>
    @inertia
  </body>
</html>

Create middlewares php artisan inertia:middleware

Add this to Kernel.php (web group) \App\Http\Middleware\HandleInertiaRequests::class,

Installed inertiajs Node modules npm install @inertiajs/inertia @inertiajs/inertia-vue3

Add this to app.js in resources/js/app.js

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, app, props, plugin }) {
    createApp({ render: () => h(app, props) })
      .use(plugin)
      .mount(el)
  },
})

Create new Pages directory in resources/js and add Home.vue file

<template>
    <div class="container">
        <h1>Welcome to home page</h1>
    </div>
</template>

<script>
export default {

}
</script>

Installed Vue.js 3, Vue loader and Vue compiler

npm install vue@next vue-loader@next
npm install -D @vue/compiler-sfc

Installed all npm packeges npm install

Finally run npm run dev npm run dev

vuejs / vue-loader

9% setup compilation vue-loader-plugin[webpack-cli] - (VUE.JS 3) #1834