T
TanStack•2d ago
quickest-silver

@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?
1 Reply
compatible-crimson
compatible-crimson•18h ago
@Netlify (Partner)

Did you find this page helpful?