0

I have an issue working with Laravel 10 and Vite on remote server. I use VS Code and SFTP Extension to sync my project between local and remote server. It works great. My Vite DEV server is also running on remote machine. I edit blade templates from my VS Code, and it successfully transfered via SFTP protocol to remote server. Vite DEV server uses HMR to watch this changes. But, when autoreload occured, sometimes, I see a blank page on my screen instead of rendered template.

My vite config:

import { build, defineConfig, splitVendorChunkPlugin } from 'vite';
import laravel from 'laravel-vite-plugin';
import inject from "@rollup/plugin-inject";

export default defineConfig({
    server: {
        hmr: {
            host: 'MY_IP',
        }
    },
    build: {
        sourcemap: 'hidden',
        emptyOutDir: true,
        rollupOptions: {
            output: {
                assetFileNames: (assetInfo) => {
                    let extType = assetInfo.name.split('.').at(1);
                    if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
                    extType = 'images';
                    } else if (/woff|woff2|otf|eot|ttf/.test(extType)) {
                        extType = "fonts";
                    }
                    return `assets/${extType}/[name]-[hash][extname]`;
                },
                chunkFileNames: 'assets/js/[name]-[hash].js',
                entryFileNames: 'assets/js/[name]-[hash].js',
            },
        },
    },
    plugins: [
        splitVendorChunkPlugin(),
        inject({
            $: 'jquery',
            jQuery: 'jquery',
        }),
        laravel({
            input: ['resources/scss/styles.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ]
});

Vite DEV server is launched with command vite --debug --host.

Logs from DEV server on blade template saving:

  11:09:20 AM [vite] page reload resources/views/trader_add/index.blade.php (x6)
      vite:hmr [no modules matched] resources/views/trader_add/index.blade.php +1ms
      vite:hmr [file change] resources/views/trader_add/index.blade.php +91ms
    11:09:20 AM [vite] page reload resources/views/trader_add/index.blade.php (x7)
      vite:hmr [no modules matched] resources/views/trader_add/index.blade.php +2ms
      vite:cache [304] /@vite/client +10s
      vite:time 0.63ms /@vite/client +10s
      vite:cache [304] /resources/scss/styles.scss?direct +22ms
      vite:time 0.42ms /resources/scss/styles.scss +22ms       
      vite:cache [304] /resources/js/app.js +1ms
      vite:time 0.27ms /resources/js/app.js +1ms
      vite:time 0.21ms /resources/images/logo.png +2ms
      vite:time 0.14ms /resources/images/notification.svg +0ms       
      vite:time 0.15ms /resources/images/notifications_ok.svg +1ms   
      vite:cache [304] /node_modules/vite/dist/client/env.mjs +5ms   
      vite:time 0.23ms /node_modules/vite/dist/client/env.mjs +3ms   
      vite:time 0.21ms /resources/images/notifications_info.svg +16ms
      vite:time 0.15ms /resources/images/notifications_error.svg +3ms
      vite:time 0.24ms /resources/images/burger.svg +4ms
      vite:time 0.16ms /resources/images/icon-nav_buy.svg +0ms
      vite:time 0.17ms /resources/images/icon-nav_export.svg +2ms
      vite:time 0.27ms /resources/images/icon-nav_stats.svg +15ms
      vite:time 0.14ms /resources/images/icon-nav_api.svg +2ms
      vite:time 0.19ms /resources/images/stats_green.svg +3ms
      vite:time 0.19ms /resources/images/stats_red.svg +5ms
      vite:time 0.22ms /resources/images/stats_blue.svg +2ms
      vite:time 0.17ms /resources/images/stats_yellow.svg +1ms
      vite:time 0.18ms /resources/images/arrow_black.svg +11ms
      vite:time 0.16ms /resources/images/ok.svg +4ms
      vite:time 0.15ms /resources/images/del.svg +2ms
      vite:time 0.17ms /resources/images/file-csv.svg +5ms
      vite:time 0.28ms /resources/images/filter.svg +6ms
      vite:time 0.16ms /resources/images/arrow.svg +1ms
      vite:cache [304] /resources/js/scripts.js +133ms
      vite:time 0.58ms /resources/js/scripts.js +50ms
      vite:time 0.27ms /resources/images/icon-nav_buy-active.svg +58ms
      vite:hmr [file change] resources/views/trader_add/index.blade.php +7s
    11:09:28 AM [vite] page reload resources/views/trader_add/index.blade.php (x8)
      vite:hmr [no modules matched] resources/views/trader_add/index.blade.php +1ms
      vite:hmr [file change] resources/views/trader_add/index.blade.php +55ms
    11:09:28 AM [vite] page reload resources/views/trader_add/index.blade.php (x9)
      vite:hmr [no modules matched] resources/views/trader_add/index.blade.php +0ms
      vite:cache [304] /@vite/client +9s
      vite:time 0.47ms /@vite/client +9s
      vite:cache [304] /resources/scss/styles.scss?direct +1ms    
      vite:time 0.38ms /resources/scss/styles.scss +1ms
      vite:time 0.19ms /resources/images/logo.png +1ms
      vite:time 0.15ms /resources/images/notification.svg +1ms    
      vite:time 0.20ms /resources/images/notifications_ok.svg +0ms
      vite:cache [304] /resources/js/app.js +22ms
      vite:time 0.59ms /resources/js/app.js +21ms
      vite:time 0.30ms /resources/images/notifications_info.svg +13ms
      vite:time 0.15ms /resources/images/notifications_error.svg +1ms
      vite:time 0.14ms /resources/images/burger.svg +1ms
      vite:time 0.15ms /resources/images/icon-nav_buy.svg +0ms
      vite:cache [304] /node_modules/vite/dist/client/env.mjs +24ms
      vite:time 0.42ms /node_modules/vite/dist/client/env.mjs +8ms
      vite:time 0.48ms /resources/images/filter.svg +25ms
      vite:time 0.16ms /resources/images/stats_yellow.svg +1ms
      vite:time 0.21ms /resources/images/arrow.svg +4ms
      vite:time 0.21ms /resources/images/stats_blue.svg +3ms
      vite:time 0.22ms /resources/images/icon-nav_stats.svg +0ms
      vite:time 0.21ms /resources/images/stats_green.svg +1ms
      vite:time 0.34ms /resources/images/icon-nav_api.svg +16ms
      vite:time 0.25ms /resources/images/file-csv.svg +1ms
      vite:time 0.21ms /resources/images/stats_red.svg +2ms
      vite:time 0.41ms /resources/images/icon-nav_export.svg +7ms
      vite:time 0.17ms /resources/images/arrow_black.svg +0ms
      vite:time 0.14ms /resources/images/ok.svg +2ms
      vite:time 0.24ms /resources/images/del.svg +16ms
      vite:cache [304] /resources/js/scripts.js +133ms
      vite:time 0.48ms /resources/js/scripts.js +55ms
      vite:time 0.23ms /resources/images/icon-nav_buy-active.svg +72ms
      vite:hmr [file change] resources/views/trader_add/index.blade.php +11s
    11:09:39 AM [vite] page reload resources/views/trader_add/index.blade.php (x10)
      vite:hmr [no modules matched] resources/views/trader_add/index.blade.php +1ms
      vite:hmr [file change] resources/views/trader_add/index.blade.php +265ms
    11:09:39 AM [vite] page reload resources/views/trader_add/index.blade.php (x11)
      vite:hmr [no modules matched] resources/views/trader_add/index.blade.php +2ms
      vite:hmr [file change] resources/views/trader_add/index.blade.php +88ms
    11:09:39 AM [vite] page reload resources/views/trader_add/index.blade.php (x12)
      vite:hmr [no modules matched] resources/views/trader_add/index.blade.php +2ms

As you can see, at the and of log, my edited page is reloading multiple times by Vite DEV server. I think that it is the main reason for problem. How can I fix it? Thanks!

Shellai
  • 7
  • 1
  • 4

1 Answers1

0

Because the vite assets are not loaded because the website script and css links to localhost instead of an accessible host on the network. I had the same issue and was able to resolve it with the instructions here, answer by Neo: https://stackoverflow.com/a/76666874/22132679

Alvin Web
  • 1
  • 2
  • My scripts and HMR are connected to remote host, as you can see from my code. When I edit directly file on remote, it works perfectly. But when I work from VS Code and sync my edited file from locale to remote on save, it gives a blank screen. I think, that vite tries to watch this file, at least, 2 times. So it reload twice my page and I see a blank page. – Shellai Jul 12 '23 at 17:46
  • Oh sounds like a race condition, that is a tricky one, would be hard to troubleshoot on here unless you get lucky and someone else has had the same issue and figured it out. I am not sure how your setup works, I never have had a setup that I edit files on remove that would require Vite. As much as VSCode has become the default for most people including myself, I have A LOT of issue like this with it and its extensions. – Alvin Web Jul 15 '23 at 05:03
  • I don't know how you're syncing with VSCode on a remote, I've never personally used that functionality but I am inclined to think your issue is that the mechanism is not compatible with how Laravel and Vite are programmed to work and a not a problem with their configuration. I think if you dig in Vite settings you might find some compatibility configuration for delays and such perhaps. Good luck – Alvin Web Jul 15 '23 at 05:03