Upgrade to Craft 4 + vite plugin update breaks reload of twig files

[kevinmu17]

Describe the bug

In the vite.config.js I have the vite-plugin-restart plugin installed with the following config:

ViteRestart({
    reload: [
        path.join(__dirname, './templates/**/*'),
    ],
}),

Previously this worked like a charm but after updating everything to Craft 4 including the vite plugin for Craft this stopped working. The HMR for CSS & JS files are working fine though. Normally you get a notification in the terminal on save saying:

11:18:34 AM [vite] page reload templates/index.twig

It is now empty or after multiple saves the number of times you saved but doing no reload

11:18:34 AM [vite] 
11:18:34 AM [vite] (x2)

sidenote: I'm also noting that after saving the vite.config.js file i'm getting the error:

client.ts:203          GET http://siteurl.nitro/__vite_ping 404 (Not Found)

To reproduce

1. nitro ssh
2. npm run dev
3. save a twig file from the templates folder

Expected behaviour

After hitting save in a .twig file reloading the browser

Versions

• Plugin version: 4.0.0-beta.4
• Craft version: Craft Pro 4.0.1
• PHP version: 8.0.17

[kevinmu17]

Allright, after debugging the hell out of it, it seems the issue occurs after updating vite.js beyond 2.9.1

But after this point I don't exactly know what happens here. Maybe an incompatibility in vite with the vite-plugin-restart or something, maybe some configs changed where the vite.php file relies on. I'll dive into this further, for now there is a deadline to catch! :)

[khalwat]

I'm not sure either, but if it's a regression from Vite or the vite-plugin-restart plugin, definitely post an issue on their respective repositories.

[khalwat]

Addressed in:

Craft 4: https://github.com/nystudio107/craft-plugin-vite/releases/tag/4.0.1 Craft 3: https://github.com/nystudio107/craft-plugin-vite/releases/tag/1.0.25

[khalwat]

Released as:

Craft 4: https://github.com/nystudio107/craft-vite/releases/tag/4.0.0 Craft 3: https://github.com/nystudio107/craft-vite/releases/tag/1.0.25

[engram-design]

Upgrading to 4.0.1, I'm getting this polling error (it wasn't an issue before).

And I'm not using the vite-reload plugin

vite.config.js

export default ({ command }) => ({
    base: command === 'serve' ? '' : '/dist/',

    build: {
        outDir: './dist',
        emptyOutDir: true,
        manifest: true,
        sourcemap: true,
        rollupOptions: {
            input: {
                'formie-integration-settings': 'src/js/formie-integration-settings.js',
                'formie-form-new': 'src/js/formie-form-new.js',
                'formie-form': 'src/js/formie-form.js',
            },
        },
    },

    server: {
        origin: 'http://localhost:4000',
    },
});

vite.config.php

'vite' => [
    'class' => VitePluginService::class,
    'assetClass' => FormsAsset::class,
    'useDevServer' => true,
    'devServerPublic' => 'http://localhost:4000/',
    'errorEntry' => 'js/main.js',
    'cacheKeySuffix' => '',
    'devServerInternal' => 'http://localhost:4000/',
    'checkDevServer' => true,
    'includeReactRefreshShim' => false,
],

Not sure why it's using https://formie.test/__vite_ping and not http://localhost:4000/__vite_ping?

[engram-design]

Ah, of course, it's to do with the https://formie.test and http://localhost:4000, so that makes sense. All good.

[khalwat]

Glad to help @engram-design !