Laravel 9 Vite Bundled JS not running?

Hello! Any help would be much appreciated. I've searched the internet and chatgpt and i'm failing to find an answer.

I tried to setup a new Laravel 9 project. I've tried multiple ways of getting a Vue.js app running but to no avail.

Whatever code i put inside resources/js/app.js will not run.

The bundling works and the file generated and I can see in the html the relevant script tag.

However, the script tag has a type="module" in it.

I've tried using laravel/ui from a fresh proejct.

php artisan ui vue --auth

And when I login, it shows the page without vue.js example-components.

I have a suspicion it's to do with the type="module" props but i can't seem to find where to do something about it.

cheers!

Sergiu17

3 years ago

Level 60

Share your code, how do you import your js compiled files, any console errors?

uniquelypi

3 years ago

Level 1

No. There are no console errors. In fact, I've put a console.log("mounted") in app.js and I don't see it run in the console.

app.js:

import './bootstrap';
import { createApp } from 'vue';

const app = createApp({});

import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);

app.mount('#app');

console.log("mounted");

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

and the blade file :

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">

    <!-- Scripts -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
    <div id="app">

    	</div>
</body>
</html>

Please or to participate in this conversation.