laravelvue.jsvuejs3vite

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

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 enter image description here

- my vite.config.js enter image description here

- the error that I see enter image description here

larave ^9.19
vue ^3.2.30
vite ^3.0.0

how I can fix that? and thanks in advance.

Solution

  • 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.