ederson's avatar

Can not handle vue files

I start a new project with Laravel 8 + intertiajs + vue3

I follow the instructions to install mix , then vue3 and then inertiajs

Somehow compiling the assets fails

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|   <div>
|     <!-- <Head title="Welcome" /> -->

I ve spent the the last day with this trying everything i found online but nothing works. Downgraded Mix , downgraded vue3, tried new projects. Nothing worked and i am pretty sure it is something stupid and easy i just fail to see cause i never had problems with mix and vue

0 likes
10 replies
tykus's avatar

Show your webpack.mix.js file; you probably need to chain the vue() function, e.g.

mix.js('resources/js/app.js', 'public/js').vue();

https://laravel-mix.com/docs/6.0/vue

Whenever you run npm run dev for the first time, it will install the missing loader(s)

ederson's avatar

@tykus unfortunately i added this as instructed

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);
ederson's avatar

still the same error.

here is the package.json

"devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.38",
        "lodash": "^4.17.19",
        "postcss": "^8.3.11",
        "sass-loader": "^12.3.0",
        "vue-loader": "^16.8.3",
        "webpack": "^5.62.1"
    },
    "dependencies": {
        "bootstrap": "^5.0.0-beta2",
        "vue": "^3.2.21"
    }
tykus's avatar

Where is Inertia in the package.json?

ederson's avatar

sorry wrong file

"devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.38",
        "lodash": "^4.17.19",
        "postcss": "^8.3.11",
        "sass-loader": "^12.3.0",
        "vue-loader": "^16.8.3",
        "webpack": "^5.62.1"
    },
    "dependencies": {
        "@inertiajs/inertia": "^0.10.1",
        "@inertiajs/inertia-vue3": "^0.5.2",
        "vue": "^3.2.21"
    }
MohamedTammam's avatar

You will need to run it 2 times after adding vue chained method.

ederson's avatar

i ve run it too many times to count

tykus's avatar

@ederson can you just delete your node_modules directory and run npm install? Then try again to npm run dev?

ederson's avatar

@tykus done that too but there was no harm retrying. still though the same error

ERROR in ./resources/js/Pages/Test.Vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|   <div>
|     <!-- <Head title="Welcome" /> -->

Please or to participate in this conversation.