Link to the code that reproduces this issue

https://github.com/robcaldecott/iframe-nextjs

To Reproduce

Clone the repo and first build the app that will be hosted in an iframe (this part is build using Vite but that does not matter).

cd remote
npm install
npm run dev

This will start a little app on http://localhost:5173. Leave this running.

Now, in a separate shell, run the NextJS app that exhibits the issue:

cd host
npm install
npm run dev

Open http://localhost:3000 in your browser, and open the DevTools so you can see the console.
Refresh the page and note that there are no console messages and the three iframe components on the page do not get the onLoad handler called.

However, if you make changes to the source and the app is reloaded by HMR then sometimes the onLoad event will work. But this is intermittent.

Next, shut down the NextJS host, build it for production and start it up:

cd host
npm run build
npm start

Go to http://localhost:3000 and refresh the page - you will see that onLoad is now working for all three iframe components correctly.

Current vs. Expected behavior

When running the NextJS host app in dev mode I would expect the onLoad handler on the iframe elements to work. However, it never works in dev mode when refreshing the page.

In production mode everything works correctly and the three onLoad events work as expected.

Included in the repo is a host app written using Vite and the latest React 18 build. This app does not suffer from this issue and onLoad works in dev and prodcuction.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:13:04 PDT 2024; root:xnu-10063.141.2~1/RELEASE_ARM64_T6020
  Available memory (MB): 16384
  Available CPU cores: 12
Binaries:
  Node: 20.16.0
  npm: 10.8.1
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.8 // Latest available version is detected (14.2.8).
  eslint-config-next: 14.2.8
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I have tried the following to get the onLoad event to fire in dev mode:

• Make everything a client component with use client.
• Disabling React Strict mode in the NextJS config.
• Throttling the network.
• Throttling the CPU.
• Using addEventListener on the iframe ref to capture the load event.
• Replacing the iframe content with a public website URL.
• Using Safari instead of Chrome.

None of these make any difference: onLoad will not work when refreshing the page in dev mode. It will only fire occasionally when editing the code and causing the module to reload.

While the app works fine in production, I am relying on onLoad working in dev mode as the host then communicates with each iframe using postMessage (this code has been removed to simplify the example.) I can hack around this using a useEffect with a setTimeout to call setLoaded but this is not ideal.