Cannot get Laravel + Breeze via Sail to work (Vue + Inertia) - CORS request did not succeed.

Hi all,

For the last few days I have been trying to do a clean install of the Laravel framework, Vue and Inertia, but I'm having some difficulties understanding why it doesn't work the way I want it to.

These are the steps I have taken to install all of this ("sail" is an alias for "./vendor/sail"):

curl -s https://laravel.build/laracasts-vue-inertia-install | bash
sail artisan up -d
sail composer require laravel/breeze --dev
sail php artisan breeze:install vue

So far it works and the standard 'Welcome.vue' file is rendered. However, when I change the 'Welcome.vue' file to:

<template>
				<h1>Test</h1>
<template>

This doesn't work. I restarted sail and the view stays the same: it's the 'normal' welcome view of Laravel. Somehow, I'm missing probably a pretty basic step. When I for example do "sail npm run dev", the application suddenly shows an empty screen with the following errors in the console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://0.0.0.0:5173/@vite/client. (Reason: CORS request did not succeed). Status code: (null).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://0.0.0.0:5173/resources/js/app.js. (Reason: CORS request did not succeed). Status code: (null).

Module source URI is not allowed in this document: “http://0.0.0.0:5173/resources/js/app.js”. localhost:19:155
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://0.0.0.0:5173/resources/js/Pages/Welcome.vue. (Reason: CORS request did not succeed). Status code: (null).

Module source URI is not allowed in this document: “http://0.0.0.0:5173/resources/js/Pages/Welcome.vue”. localhost:19:243

This to me does not make sense: I only changed the 'Welcome.vue' file.

My 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/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

My web.php:

Route::get('/', function () {
    return inertia('Welcome');
});

My app.js:

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

Can somebody help me with this? Sorry in case I missed something obvious...

Thanks!

​