T
TanStack•2mo ago
ambitious-aqua

@netlify/vite-plugin-tanstack-start' breaking hmr refresh?

Hi, 
"@tanstack/react-router": "^1.132.31",
"@tanstack/react-router-devtools": "^1.132.31",
"@tanstack/react-start": "^1.132.31",
"@netlify/vite-plugin-tanstack-start": "^1.0.2",
"@tanstack/devtools-vite": "^0.3.3",
"@tanstack/router-plugin": "^1.132.31",
"@tanstack/react-router": "^1.132.31",
"@tanstack/react-router-devtools": "^1.132.31",
"@tanstack/react-start": "^1.132.31",
"@netlify/vite-plugin-tanstack-start": "^1.0.2",
"@tanstack/devtools-vite": "^0.3.3",
"@tanstack/router-plugin": "^1.132.31",
A strange error where netlify() is breaking react refresh HMR. vite.config.js: 
import react from '@vitejs/plugin-react-swc';
// import react from '@vitejs/plugin-react'; // also doesn't work
import tsConfigPaths from 'vite-tsconfig-paths';
import {tanstackStart} from '@tanstack/react-start/plugin/vite';
import {ConfigEnv, defineConfig} from 'vite';
import netlify from '@netlify/vite-plugin-tanstack-start';

export default defineConfig(({mode}: ConfigEnv) => {
    const isDevelopment = mode === 'development';
    return {
        server: {
            port: 5173,
            host: '0.0.0.0',
        },
        plugins: [
            tsConfigPaths({
                projects: ['./tsconfig.json'],
            }),
            tanstackStart(),
            netlify(),
            // this is the hack to make it work
            // ...(isDevelopment ? [] : [netlify()]),
            react()

        ],
        base: '/',
    };
});
import react from '@vitejs/plugin-react-swc';
// import react from '@vitejs/plugin-react'; // also doesn't work
import tsConfigPaths from 'vite-tsconfig-paths';
import {tanstackStart} from '@tanstack/react-start/plugin/vite';
import {ConfigEnv, defineConfig} from 'vite';
import netlify from '@netlify/vite-plugin-tanstack-start';

export default defineConfig(({mode}: ConfigEnv) => {
    const isDevelopment = mode === 'development';
    return {
        server: {
            port: 5173,
            host: '0.0.0.0',
        },
        plugins: [
            tsConfigPaths({
                projects: ['./tsconfig.json'],
            }),
            tanstackStart(),
            netlify(),
            // this is the hack to make it work
            // ...(isDevelopment ? [] : [netlify()]),
            react()

        ],
        base: '/',
    };
});
The console whenever there is a code change despite only referencing in the vite.config.js once and as per the docs. (After start() and before react()). :
9:45:57 AM [vite] ⬥ Netlify ⚠ Warning: Multiple instances of @netlify/vite-plugin have been loaded. This may cause unexpected behavior if the plugin is configured differently in each instance. If you have one instance of this plugin in your Vite config, you may safely remove it.
In the web browser console there is a message about GET http://localhost:5173/@react-refresh returning a 404. This is confirmed by 
# returns 404
 curl -I http://localhost:5173/@react-refresh 
# returns 404
 curl -I http://localhost:5173/@react-refresh
As soon as I remove the netlify() plugin it works again. Again, this "was" working previously.... Has anyone else seen this?
3 Replies
rival-black
rival-black•2mo ago
@Netlify (Partner)
inland-turquoise
inland-turquoise•2mo ago
Thanks for the ping, Manuel! I've sent this onto our engineering team.
sensitive-blue
sensitive-blue•2mo ago
Hey there @Jingle Bells. Sorry for the delay. I haven't been able to reproduce this. Are you still seeing this issue with the latest version of TanStack Start and the Netlify plugin? btw the Warning: Multiple instances of @netlify/vite-plugin have been loaded warning is unrelated. It looks like it happens when a change is made to the vite.config.ts itself while running the dev server. It's a false positive warning. I'll get that fixed. Thanks for spotting that!

Did you find this page helpful?