laravel 9 + lando = no livereload and no sourceMapping

Question

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,
        }
    },
});

Answer 1

• With css.devSourcemap: true a sourcemap file is generated and used.
• With server.watch.usePolling: true vite will detect file changed inside lando environment.

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,
        }
    },
});