Laravel VueJs Vite: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle?

Question

I'm using vite in my laravel project but when I run npm run build shows me errors in the syntax and the syntax sounds correct.

- my component

- my vite.config.js

- the error that I see

larave ^9.19
vue ^3.2.30
vite ^3.0.0

how I can fix that? and thanks in advance.

Well you have a syntax error, but without code we can't say much — Lk77
– Lk77, Commented Dec 8, 2022 at 14:14
You don't call/use the vue plugin, so vue files do not work, you should add vue() in the plugins array — Lk77
– Lk77, Commented Dec 15, 2022 at 18:37
yes right, but when I add it I see the error in the production as I say in the first — Abdelkhalek Haddany
– Abdelkhalek Haddany, Commented Dec 15, 2022 at 18:47

Marsad Akbar · Accepted Answer · 2023-01-21 19:11:48Z

61

This might be helpful for future nobs like me. I have also faced the same issue with Fresh Laravel 9 and inertia JS. I have tried all solutions and this works for me.

npm i @vitejs/plugin-vue

Open vite.config.js and write vue() function before Laravel

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue"; //add this line
import laravel from "laravel-vite-plugin";

export default defineConfig({
    plugins: [
        vue(), // write this
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
        }),
    ],
});

then

npm run dev

Hope it will help.

answered Jan 21, 2023 at 19:11

Marsad Akbar

6617 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Fandi Susanto Over a year ago

It works. But... is this supposed to be done this way? inertiajs.com should do a better job in documentation. It is confusing for us.

Marsad Akbar Over a year ago

I am glad it works for you. Hope inertia might update as well.

Nick Poulos Over a year ago

Thank you, def can be frustrating tracking this stuff down. Inertia should def try to include this in the docs.

tmatyo Over a year ago

While the error is self explanatory, (@ the time of writing) this small config is still not part of the Inertia docs in the client-side installation part

eylay Over a year ago

How many upvotes should these comment take, so that Inertia decide to fix their documentations??? It's been a long time this issue is not fixed!!!

|

Collectives™ on Stack Overflow

Laravel VueJs Vite: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle?

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related