vitelaravel-9lando

laravel 9 + lando = no livereload and no sourceMapping


I just create a new Laravel 9 project and I'm using lando.

I have followed instructions from this : https://sinnbeck.dev/posts/getting-vite-and-laravel-to-work-with-lando

Currently, the site is working, I can update php, css or js code.

But, there is no livereloading and I've got an error in my console about a missing sourcemapping for the css at http://localhost:3009/resources/css/app.css.map

There is a link to the project : https://github.com/CrunchyArtie/warene-next

There is my vite.config.js file:

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        https: false,
        host: true,
        port: 3009,
        hmr: {host: 'localhost', protocol: 'ws'},
    },

});

and my .lando.yml file :

name: warene
recipe: laravel
config:
  webroot: ./public
  php: '8.1'
  xdebug: true
services:
  node:
    type: node:16
    scanner: false
    ports:
      - 3009:3009
    build:
      - npm install
tooling:
  dev:
    service: node
    cmd: npm run dev
  build:
    service: node
    cmd: npm run build

EDIT :

With this vite.config.js the livereloading works :

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        https: false,
        host: true,
        strictPort: true,
        port: 3009,
        hmr: {host: 'localhost', protocol: 'ws'},
        watch: {
            usePolling: true,
        }
    },
});

Solution

  • This is my is my vite.config.js file:

    export default defineConfig({
        plugins: [
            laravel({
                input: ['resources/css/app.css', 'resources/js/app.js'],
                refresh: true,
            }),
        ],
        css: {
            devSourcemap: true,
        },
        server: {
            https: false,
            host: true,
            strictPort: true,
            port: 3009,
            hmr: {host: 'localhost', protocol: 'ws'},
            watch: {
                usePolling: true,
            }
        },
    });