Next.js Discord

Discord Forum

Dev mode breaks with certain Web APIs

Unanswered
Marchy posted this in #help-forum
Open in Discord
MarchyOP
"use client";
import { useState, useEffect } from "react";

export const BroadcastExample = () => {
  const [message, setMessage] = useState("");

  const bc = new BroadcastChannel("hello_world");

  useEffect(() => {
    console.log("hello??");
    bc.onmessage = (e) => {
      console.log("Received:", e.data);
    };

    return () => {
      bc.close();
    };
  }, []);

  return (
    <>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <input
        type="button"
        onClick={() => bc.postMessage(message)}
        value="Send"
      />
    </>
  );
};


Running into some weird behavior working with webAPIs in dev mode. When encountering certain errors, the useEffect stops working entirely, even on server restart and hard refresh. The only thing I've found that resolves the issue is running next build and next start to build out a production build of the site, for some reason. It behaves normally in dev mode after.

Started on node 18, upgraded to 20 to see if that would resolve the issue. Now this component is completely broken in dev mode, but works fine in server mode. I see a double-render of the useEffect which I'm guessing is the cause.

15 Replies

MarchyOP
&1159364112724262982 Updating to 20 actually breaks this completely in dev mode? :meow_stare:
I'm getting a double-render on the useEffect which I'm guessing is the cause. It runs fine in prod mode.
:SheaWeird:
Hmm lemme try the code above in my computer when I open it
In the meantime try using Linux if possible
@joulev In the meantime try using Linux if possible
MarchyOP
I hate dealing with wsl on windows I miss my mac 😭
joulev
After a few wtf moments I never use windows for web dev again
It’s just painge
:Sadge:
MarchyOP
windows shell: great for managing 1000's of other windows machines on a network for IT - terrible for everything else
@Marchy jsx "use client"; import { useState, useEffect } from "react"; export const BroadcastExample = () => { const [message, setMessage] = useState(""); const bc = new BroadcastChannel("hello_world"); useEffect(() => { console.log("hello??"); bc.onmessage = (e) => { console.log("Received:", e.data); }; return () => { bc.close(); }; }, []); return ( <> <input type="text" value={message} onChange={(e) => setMessage(e.target.value)} /> <input type="button" onClick={() => bc.postMessage(message)} value="Send" /> </> ); }; Running into some weird behavior working with webAPIs in dev mode. When encountering certain errors, the useEffect stops working entirely, even on server restart and hard refresh. The only thing I've found that resolves the issue is running `next build` and `next start` to build out a production build of the site, for some reason. It behaves normally in dev mode after. Started on node 18, upgraded to 20 to see if that would resolve the issue. Now this component is completely broken in dev mode, but works fine in server mode. I see a double-render of the `useEffect` which I'm guessing is the cause.
joulev
so i tested this and i think the double render introduced by react in strict dev mode is the cause. prod mode doesn't have the double render so it works over there. this bug isn't related to the nodejs-related useEffect bug where useEffect simply doesn't run at all

disclaimer: all of the following are just guesses, because i have never used BroadcastChannel before and don't know how it works.

i think the cause is that in the first render, when it finishes and the component is unmounted, bc.close() is run. in the next render, since bc is already closed it can't work again. if i remove bc.close() from the cleanup function, it works fine.

how to fix? a temporary fix would be to remove bc.close(). a better fix will require a better understanding of BroadcastChannel which I don't have :SheaWeird: maybe look up react hooks related to BroadcastChannel?
MarchyOP
Turns out this is becoming a way bigger problem than expected. I'm unable to use dev mode at all becuase of the double render breaking web APIs and permission requests, so I guess I'll be opening a github issue. :meow_stare: