With React Router: Uncaught SyntaxError: Identifier 'RefreshRuntime' has already been declared

[tsteckenborn]

Hey there,

Could somebody help me understand why there's apparently an HMR issue in conjunction with e.g. React Router v7?

Namely there's Uncaught SyntaxError: Identifier 'RefreshRuntime' has already been declared. It looks like the HMR is added twice, with that leading to an issue (and the second one not being fully added).

In the browser I can see:

// [BEGIN] REACT REFRESH HEADER ------------------------------------------------
import RefreshRuntime from "/@id/__x00__virtual:react-router/hmr-runtime";

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(
      "React Router Vite plugin can't detect preamble. Something is wrong."
    );
  }

  prevRefreshReg = window.$RefreshReg$;
  prevRefreshSig = window.$RefreshSig$;
  window.$RefreshReg$ = (type, id) => {
    RefreshRuntime.register(type, "[...]/website/app/root.tsx" + " " + id)
  };
  window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
}
// [END] REACT REFRESH HEADER --------------------------------------------------

// [BEGIN] REACT REFRESH BODY --------------------------------------------------
var _s2 = $RefreshSig$();
import { withComponentProps as _withComponentProps, withErrorBoundaryProps as _withErrorBoundaryProps } from "/@id/__x00__virtual:react-router/with-props";
import __vite__cjsImport3_react_jsxDevRuntime from "/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=5718bc10"; const jsxDEV = __vite__cjsImport3_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, "[...]/website/app/root.tsx " + id);
  };
  window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
}
var _s = $RefreshSig$();

For a sample see the pr #21.

[cpojer]

The issue is in React Router's Vite Plugin which doesn't allow adding Babel plugins, so when you use the React plugin it injects the refresh runtime twice: remix-run/react-router#12352

A workaround is to use the plain Vite Babel plugin for fbtee + the React Router plugin.