@react-refresh throw "React refresh runtime was loaded twice. Maybe you forgot the base path?" when the page load more than one react-swc vite instance.

[pakholeung37]

In the 'refresh-runtime.js' file, this code is meant to prevent loading 'refresh-runtime' twice. However, after commenting it out, I found that the application still runs perfectly.

if (window.$RefreshReg$) {
  throw new Error(
    "React refresh runtime was loaded twice. Maybe you forgot the base path?"
  );
}

I made a repo to reproduce this. https://github.com/pakholeung37/double-vite-instance-demo

[ArnaudBarre]

The application will run correctly but HMR will be broken. "Micro-frontend" is not supported. The right way to this in Vite is to use one instance and to merge apps via sources (i.e. <script type="module" src="../app-2/src/main.tsx"></script>)

[pakholeung37]

The application will run correctly but HMR will be broken. "Micro-frontend" is not supported. The right way to this in Vite is to use one instance and to merge apps via sources (i.e. <script type="module" src="../app-2/src/main.tsx"></script>)

The current path cannot be resolved, and it resolves as 'localhost:8080/app-2/src/main.tsx.' Regarding the HMR problem, while it would be great if it worked, even if it remains broken, it is acceptable.

[ArnaudBarre]

Ah yeah I see so you can instead have <script type="module" src="src/app.tsx"></script> and in app2.tsx have import "../../app-2/src/main.tsx"

[maziar-dandc]

I'm just commenting this for future-me:

This error can also happen if RefreshRuntime is imported from a domain that is different from rest of vite imports. E.g: localhost vs 0.0.0.0 vs [::]