Redefinition of RefreshRuntime w/ Vite React app

[WilliamImm]

There's an issue with this service that causes the react-refresh module to be loaded twice in Vite-based React apps, when testing with Webdriver.IO and with this service added to the configuration. It kinda seems like the preamble is being run twice. This prevents any tests reliant on the React DOM from working.

Here's an example of the broken preamble loaded into the browser:

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/src/App.tsx");import * as RefreshRuntime from "/@react-refresh";

if (!window.$RefreshReg$) throw new Error("React refresh preamble was not loaded. Something is wrong.");
const prevRefreshReg = window.$RefreshReg$;
const prevRefreshSig = window.$RefreshSig$;
window.$RefreshReg$ = RefreshRuntime.getRefreshReg("<project directory>/src/App.tsx");
window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;

var _s = $RefreshSig$();
import * as RefreshRuntime from "/@react-refresh";
if (!window.$RefreshReg$) throw new Error("React refresh preamble was not loaded. Something is wrong.");
const prevRefreshReg = window.$RefreshReg$;
const prevRefreshSig = window.$RefreshSig$;
window.$RefreshReg$ = RefreshRuntime.getRefreshReg("<project directory>/src/App.tsx");
window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;

For comparision, it should look like this:

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/src/App.tsx");import * as RefreshRuntime from "/@react-refresh";

if (!window.$RefreshReg$) throw new Error("React refresh preamble was not loaded. Something is wrong.");
const prevRefreshReg = window.$RefreshReg$;
const prevRefreshSig = window.$RefreshSig$;
window.$RefreshReg$ = RefreshRuntime.getRefreshReg("<project directory>/src/App.tsx");
window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;

I'm using Node 20.10.0, Vite 5.0.12, Webdriver.IO 8.29.7, and wdio-vite-service 1.0.6. Disabling the service in wdio.conf.ts and manually pointing the baseurl to Vite's expected port works as expected.

[christian-bromann]

@WilliamImm thanks for raising the issue. Do you think it is possible to create a reproducible example of this?

[WilliamImm]

@WilliamImm thanks for raising the issue. Do you think it is possible to create a reproducible example of this?

Of course. I've uploaded a reproducible build based on the Vite React TS starter. Use pnpm instead of npm, but otherwise this should be fairly straightforward to set up.
react-webdriver-test.tar.gz

The most relevant files to modify are wdio.conf.ts and e2e/test.e2e.ts, I've included an in-browser debug command too.

Hopefully this works, and if you need more information, please let me know.

[christian-bromann]

@WilliamImm mind sharing this as GitHub repository?

[WilliamImm]

@WilliamImm mind sharing this as GitHub repository?

Of course! https://github.com/WilliamImm/wdio-vitereact-issuereproduction

[christian-bromann]

Thanks @WilliamImm , I was able to reproduce this.

We greatly appreciate any contributions that help resolve the bug. While we understand that active contributors have their own priorities, we kindly request your assistance if you rely on this bug being fixed. We encourage you to take a look at our contribution guidelines or join our friendly Discord development server, where you can ask any questions you may have. Thank you for your support, and cheers!