Trying to make React Refresh work with React Cosmos and it only seems to works when the renderer is loaded outside an iframe.

How to replicate

Clone react-cosmos repository

git clone --branch fast-refresh https://github.com/react-cosmos/react-cosmos.git

Build the packages

cd react-cosmos
npm i
npm run build

Start the webpack example

npm --workspace example-webpack start

There are two ways to load a fixture (say the "CounterButton" one)

1. In the main UI: http://localhost:5000/?fixtureId=%7B%22path%22%3A%22src%2FCounterButton.fixture.tsx%22%7D
2. In full-screen mode: http://localhost:5000/renderer.html?_fixtureId=%7B%22path%22%3A%22src%2FCounterButton.fixture.tsx%22%7D

Now you'll notice that if you make changes to the source file react-cosmos/examples/shared/components/CounterButton.tsx, say add some text after the button suffix, the changes are reflected in the 2nd tab but not in the 1st.

This is kind of odd because the exact same code runs in both places, but in the 1st tab the component won't update until the entire browser page is reloaded. The only difference is that in the 1st case the renderer runs inside an iframe.

Does anyone know how putting the renderer inside an iframe could interfere with this plugin?
Any ideas are welcome. Thanks!