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.

Answer 1

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.