react: CRA: Fast Refresh breaks embedded DevTools backend

`TypeError: undefined is not a function (near ‘…e.sub…’) (anonymous function) src/backend/index.js:26 23 | // DevTools didn’t get injected into this page (maybe b’c of the contentType). 24 | return () => {}; 25 | }

26 | const subs = [ | ^ 27 | hook.sub( 28 | ‘renderer-attached’, 29 | ({ View compiled (anonymous function) src/backend.js:179 176 | hook.emit(‘shutdown’); 177 | }); 178 | 179 | initBackend(hook, agent, window); | ^ 180 | 181 | // Setup React Native style editor if the environment supports it. 182 | if (resolveRNStyle != null || hook.resolveRNStyle != null) {` React version:

Steps To Reproduce

create-react-app
yarn add react-devtools
in index.js add import ‘react-devtools’ on first line
start react-devtools
start create-react-app devserver
go to localhost:3000
crash

Link to code example:

add react-devtools on first line of vanilla ‘create-react-app’

The current behavior

The expected behavior

Debug-Session

About this issue

Original URL
State: open
Created 4 years ago
Comments: 20 (8 by maintainers)

Most upvoted comments

same here, developing chrome extension using standalone react-devtools.

tjx666 on Nov 22, 2021

@feimosi updated the comment

mecirmartin on Apr 27, 2021

Update: For anyone struggling with this, it turns out, you have to wait for specific event of react-devtools, then call reactRefreshRuntime.injectIntoGlobalHook(contentWindow) and it will work

window.addEventListener("message", (e) => {
  if (e.data.type === "React::DevTools::getSavedPreferences") {
    console.log("react devtools::getSavedPreferences");

    //@ts-ignore
    contentWindow.$RefreshRuntime$ = reactRefreshRuntime;
    //@ts-ignore
    reactRefreshRuntime.injectIntoGlobalHook(contentWindow);
    //@ts-ignore
    console.log("this", contentWindow.$RefreshRuntime$);
    // @ts-ignore
    contentWindow.$RefreshReg$ = () => {};
    // @ts-ignore
    contentWindow.$RefreshSig$ = () => (type) => type;
  }
});

Edited for formatting by @bvaughn.

mecirmartin on Jun 3, 2021

Having this problem too. e.sub is not a function

Jack-Works on Apr 14, 2021

@mecirmartin I have not had a chance to dig into this issue, so I can’t say. But I did want to caution against depending on a solution like the one mentioned above.

bvaughn on Jun 4, 2021

@mecirmartin I later encountered some other issues so I gave up on this. When I have more time I’ll give it another try.

feimosi on Jun 3, 2021