Inertia: Module parse failed: Unexpected token

[ghost]

I am using laravel mix versions 3

After updating the package to latest changes and trying to : "npm run dev"..
I got this error:

ERROR in ./node_modules/inertia/src/inertia.js
Module parse failed: Unexpected token (109:44)
You may need an appropriate loader to handle this file type.

replace(url, options = {}) {
 return this.visit(url, { replace: true, ...options })
},

Thanks,

[reinink]

Try deleting your node_modules folder, and your package-lock.json file, running npm install again, and see what happens.

I've been making lots of changes to the library.

[ghost]

Thanks for the reply..

Did that. Still same issue..

I guess it has do with this line maybe:
https://github.com/inertiajs/inertia/blob/a12082a476986783372ed8c0994a254d21bc6b8b/src/inertia.js#L46

[reinink]

Curious, what version of NPM and Node are you on?

npm -v
node -v

[ghost]

npm: 6.4.1
node: 10.15.1

[reinink]

I'm using the same versions.

Honestly, I'm not sure what's wrong. Seems like some type of JavaScript transpilation issue.

I'm using Laravel Mix 4, and not having any issues. Maybe try that?

[ghost]

There are some issue in Mix 4 that makes me not using it..

I have found what causing this issue:
https://github.com/JeffreyWay/laravel-mix/issues/1805

[reinink]

Glad you found the issue! Closing this issue since it's not directly related to Inertia.

[ghost]

Here is how to fix this .. in case anyone faced the issue:

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules\/(?!(inertia)\/).*/,
                use: [
                    {
                        loader: "babel-loader",
                        options: Config.babel()
                    }
                ]
            }
        ]
    }
});

[reinink]

Thanks @Rux77, I really appreciate you sharing that!

[leecrosdale]

If anyone else gets this issue, check that you haven't named a vue file in your Pages directory as .Vue and not the lowercase .vue

It just caught me out, so thought I'd share.

[yannbanvi]

If anyone still encounters this issue, here how I figure out the cause in my case and it's actually a Laravel mix 6 configuration issue for Vue support.

You can check the documentation for more details : https://laravel-mix.com/docs/6.0/upgrade

But let me explain it in short here...

I was using Laravel mix 6 (you may probably use the same if you created a fresh Laravel 8 project) and according to its official documentation "Laravel Mix 6 ships with support for the latest versions of numerous dependencies, including webpack 5, PostCSS 8, Vue Loader 16, and more". So no need for you to add vue loader although the error states it.

You rather need to tell explicitly Laravel mix 6 to support vue, here what they say "_Laravel Mix was originally built to be quite opinionated. One of these opinions was that Vue support should be provided out of the box_. _Any call to_ mix.js() _would instantly come with the benefit of Vue single-file components_.

_Though we're not removing Vue support by any stretch, we have extracted Vue to its own "featured flag"_: mix.vue().

Here what I did.

First option

// You can simply use this
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
        //
]);

Second option

// Or this if you want to extract styles as well
// Feel free to check the documentation for more customisations
mix.js('resources/js/app.js', 'public/js')
.vue({
    extractStyles: true,
    globalStyles: false
})
.postCss('resources/css/app.css', 'public/css', [
        //
]);