Doesn't refresh inside iframe

[ovidiuch]

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
yarn
yarn build

Start the webpack example

yarn 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!

[tianyingchun]

any updates of this?

[pmmmwh]

Hi, can you explain the use case further? How does webpack.override.js work? Are there any error logs inside the iframe, is the code compiled differently, etc.?

[tianyingchun]

1. on page1: localhost:8000/page1 has below code

<Iframe src="localhost:8000/page2" / >

2. on `page2`: localhost:8000/page2 has below code

page2

while page2 has any change if it placed at <iframe src=.... /> it wont trigger HMR refresh

if we directly openpage2 in browser it works.

[ovidiuch]

How does webpack.override.js work?

Nothing special. Just a file that extends the webpack config to add the React Refresh loader and plugin.

Are there any error logs inside the iframe, is the code compiled differently, etc.?

No errors. The same HMR logs show up both when code runs inside and outside an iframe. The only difference is that the component doesn't re-render when inside an iframe.

client.js:99 [HMR] connected
client.js:245 [HMR] bundle rebuilding
client.js:254 [HMR] bundle rebuilt in 183ms
process-update.js:51 [HMR] Checking for updates on the server...
process-update.js:125 [HMR] Updated modules:
process-update.js:127 [HMR] - ../shared/components/CounterButton.tsx
process-update.js:132 [HMR] App is up to date.

is the code compiled differently, etc.?

No. Exactly the same code. It's literally the same page loaded directly or inside an iframe. If you follow the steps outlined in the issue you can check both windows side by side and you'll get this result:

[ethanyou725]

I think this issue was caused by externalize react. https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#externalising-react

[tianyingchun]

@ethanyou725 do you have any idea for handle webpack exterlas for react, react-dom?