HMR Does not work

[harrisKAsher]

Hi, I am trying to migrate from @originjs/vite-plugin-federation to this as it seems better supported and has HMR support. But I cannot get the HMR to work from the remotes (though the app loads). Currently I am just trying to get this set up between 3 different apps.

This is my host/vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { federation } from '@module-federation/vite';
import dotenv from 'dotenv';
const env = dotenv.config({ path: `../../.env` });

export default defineConfig({
	plugins: [
		federation({
			name: 'host',
			remotes: {
				core: {
					type: 'module',
					name: 'core',
					entry: `${env.parsed?.VITE_CORE_URL}/assets/remoteEntry.js`,
					entryGlobalName: 'core',
					shareScope: 'default'
				},
				globalStore: {
					type: 'module',
					name: 'globalStore',
					entry: `${env.parsed?.VITE_GLOBAL_STORE_URL}/assets/remoteEntry.js`,
					entryGlobalName: 'globalStore',
					shareScope: 'default'
				}
			},
			filename: 'assets/remoteEntry.js',
			shared: ['react', 'react-dom', 'react-router-dom']
		}),
		react()
	],
	build: {
		modulePreload: false,
		target: 'esnext',
		minify: false,
		cssCodeSplit: false
	}
});

This is my core/vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { federation } from '@module-federation/vite';
import dotenv from 'dotenv';
const env = dotenv.config({ path: `../../.env` });

export default defineConfig({
	plugins: [
		federation({
			name: 'core',
			filename: 'assets/remoteEntry.js',
			remotes: {
				globalStore: {
					type: 'module',
					name: 'globalStore',
					entry: `${env.parsed?.VITE_GLOBAL_STORE_URL}/assets/remoteEntry.js`,
					entryGlobalName: 'globalStore',
					shareScope: 'default'
				}
			},
			exposes: {
				'./App': './src/App.tsx'
			},
			shared: ['react', 'react-dom', 'react-router-dom']
		}),
		react()
	],
	build: {
		modulePreload: false,
		target: 'esnext',
		minify: false,
		cssCodeSplit: false
	}
});

My globalStore/vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { federation } from '@module-federation/vite';

export default defineConfig({
	plugins: [
		federation({
			name: 'globalStore',
			filename: 'assets/remoteEntry.js',
			exposes: {
				'./Store': './src/store.tsx'
			},
			shared: ['react', 'react-dom', 'react-router-dom']
		}),
		react()
	],
	build: {
		modulePreload: false,
		target: 'esnext',
		minify: false,
		cssCodeSplit: false
	}
});

The globalStore shouldn't matter as right now I am just trying to get the HMR working between Host and Core and have basically made my App.tsx to look like this in core. I have to keep globalStore in my config though as otherwise it will break as other components need it even though they aren't imported anywhere.

import React, { useEffect } from 'react';

export default function App() {
	return (
		<div>Core App Test</div>
	);
}

And in Host its this

import React from 'react';
const Core = React.lazy(() => import('core/App'));

export default function App() {
	return (
		<>
			<Core />
		</>
	);
}

So as you can see, just about as barebones as it gets, and yet HMR does not work. Though in the console I do see this

[vite] hot updated: /src/App.tsx [client:223:18](http://localhost:3100/@vite/client)

And in the network tab I can see this, which even includes the changes I made to core/App.tsx! Which just baffels me that they are there, yet it will not update them on my host.

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/src/App.tsx");import __vite__cjsImport0_react_jsxDevRuntime from "/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=f6c91154"; const jsxDEV = __vite__cjsImport0_react_jsxDevRuntime["jsxDEV"];
import RefreshRuntime from "/@react-refresh";
const inWebWorker = typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope;
let prevRefreshReg;
let prevRefreshSig;
if (import.meta.hot && !inWebWorker) {
    if (!window.__vite_plugin_react_preamble_installed__) {
        throw new Error("@vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201");
    }
    prevRefreshReg = window.$RefreshReg$;
    prevRefreshSig = window.$RefreshSig$;
    window.$RefreshReg$ = (type, id) => {
        RefreshRuntime.register(type, "/Users/MyUserName/Projects/MyApp/apps/core/src/App.tsx " + id);
    };
    window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
}
export default function Index() {
    return /* @__PURE__ */ jsxDEV("div", { children: "Core App Test Change" }, void 0, false, {
        fileName: "/Users/MyUserName/Projects/MyApp/apps/core/src/App.tsx",
        lineNumber: 25,
        columnNumber: 5
    }, this);
}
_c = Index;
var _c;
$RefreshReg$(_c, "Index");
if (import.meta.hot && !inWebWorker) {
    window.$RefreshReg$ = prevRefreshReg;
    window.$RefreshSig$ = prevRefreshSig;
}
if (import.meta.hot && !inWebWorker) {
    RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
        RefreshRuntime.registerExportsForReactRefresh("/Users/MyUserName/Projects/MyApp/apps/core/src/App.tsx", currentExports);
        import.meta.hot.accept((nextExports) => {
            if (!nextExports) return;
            const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate("/Users/MyUserName/Projects/MyApp/apps/core/src/App.tsx", currentExports, nextExports);
            if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
        });
    });
}

Either I am missing or something is broken. If you need further information from me please let me know. Thank you for the support.

[gioboa]

Hi, you can use this plugin to update your remotes in the host application when something is changing

[harrisKAsher]

Hi, I am not sure how that helps? I thought this package was suppose to work with HMR by default? I didn't see anything in the Documentation that I needed to use a separate plugin to get HMR.

That being said, I am not sure what your are suggesting what I do with that plugin, would it be putting something like this in my host/vite.cofnig.ts?

ViteRestart({
	restart: [`${env.parsed?.VITE_CORE_URL}/assets/remoteEntry.js`]
})

If so, that doesn't work.

[gioboa]

Yep, you need to add this plugin in the host vite configuration. It takes the file system paths to watch

[harrisKAsher]

Okay... That is a touch disappointing as I was hoping there would be a way to have the reset just happens. The way your describing would require me to have every developer edit the path so that it points to their location on their machine.

I guess to elaborate a bit more, my hope was to have my host app allow connections from other teams and be hosted on an AWS S3 Bucket. Then we could point the Host at the remote localhost and we could develop that way so other teams didn't have to have access to the host app. But I am assuming that is not possible, correct? (Just a note, I did test that concept with @originjs/vite-plugin-federation, it works, just couldn't do HMR.)

[ScriptedAlchemy]

Im not sure if vite ever natively supported hmr, as far as i know fast refresh and hmr only work in webpack and rspack based builds as a built-in solution.

[zhangHongEn]

The built-in HMR in Vite works well. You can see it in action by starting both the host and remote in dev mode.

[zhangHongEn]

Your host is in build mode, and the remote is in dev mode. For this scenario, additional configuration is required.

[zhangHongEn]

1.	React must use the development version.
2.	react-refresh should be a singleton.
3.	Install React Chrome DevTools.

[ScriptedAlchemy]

Does my chrome dev tools for federation work with this package?
Id so we have a module proxy that comes with fast refresh and hmr baked in. Allows us to hmr and develop against production with a local override

[zhangHongEn]

Does my chrome dev tools for federation work with this package?

yes

---

Can it bypass the rules of React Refresh?

[ScriptedAlchemy]

When you enable hmr switch a runtime plugin is added that uses resolve share hook and injects react runtime and dev versions from unpkg

[zhangHongEn]

When you enable hmr switch a runtime plugin is added that uses resolve share hook and injects react runtime and dev versions from unpkg

Then it should theoretically be supported already. I’ll check the shared configuration soon and see how to adapt it to work with @vitejs/plugin-react.

@harrisKAsher Have you tried the Module Federation Chrome extension?

[zhangHongEn]

@ScriptedAlchemy Didn’t see unpkg.

[ScriptedAlchemy]

Does a prod and dev mix work tho? Give it a try. What i know is the devtool implements a dev react to bypass mixing issues.
Check if the chrome tools runtime plugin is added in the federation globals. It might be something we just import and add in our plugin. Not sure if extention injects it or if we auto register it on our side

[harrisKAsher]

@zhangHongEn I just installed the Module Federation Chrome extension to try it out and no matter what I do I get told "No ModuleInfo Detected".