CRA: Fast Refresh breaks embedded DevTools backend

[alexanderhupfer]

`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

1. create-react-app
2. yarn add react-devtools
3. in index.js add import 'react-devtools' on first line
4. start react-devtools
5. start create-react-app devserver
6. go to localhost:3000
7. crash

Link to code example:

add react-devtools on first line of vanilla 'create-react-app'

The current behavior

The expected behavior

Debug-Session

[bvaughn]

The "hook" defined on window.__REACT_DEVTOOLS_GLOBAL_HOOK__ does not have any of the subscription methods (including sub) which causes the code to error. I think this is because the hook is actually being initialized by Fast Refresh:

react/packages/react-refresh/src/ReactFreshRuntime.js

Lines 439 to 466 in b51a686

	// For React Web, the global hook will be set up by the extension.
	// This will also run before us.
	let hook = globalObject.__REACT_DEVTOOLS_GLOBAL_HOOK__;
	if (hook === undefined) {
	// However, if there is no DevTools extension, we'll need to set up the global hook ourselves.
	// Note that in this case it's important that renderer code runs *after* this method call.
	// Otherwise, the renderer will think that there is no global hook, and won't do the injection.
	let nextID = 0;
	globalObject.__REACT_DEVTOOLS_GLOBAL_HOOK__ = hook = {
	renderers: new Map(),
	supportsFiber: true,
	inject(injected) {
	return nextID++;
	},
	onScheduleFiberRoot(
	id: number,
	root: FiberRoot,
	children: ReactNodeList,
	) {},
	onCommitFiberRoot(
	id: number,
	root: FiberRoot,
	maybePriorityLevel: mixed,
	didError: boolean,
	) {},
	onCommitFiberUnmount() {},
	};
	}

Then the embedded DevTools backend is trying to use it.

I don't know that it makes sense to try to embed the DevTools backend via an import like this anymore anyway. The way I've been using when I want to inspect Safari is to load via a <script> tag like so:

<script src="http://localhost:8097"></script>

To my knowledge, the backend import path exists primarily to support React Native integration.

[bvaughn]

Don't suppose you know of any specific cases for import-in-the-browser, @gaearon?

Maybe it's easier to do conditionally, only in DEV?

[bvaughn]

I could fix DevTools by expanding the hooks check to verify that a pre-installed hook also defines a sub method:

react/packages/react-devtools-shared/src/hook.js

Lines 19 to 22 in b51a686

	export function installHook(target: any): DevToolsHook | null {
	if (target.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) {
	return null;
	}

But this would break Fast Refresh.

[bvaughn]

Alternately, preferably, the DevTools backend just needs to be injected before the Fast Refresh runtime to avoid the whole issue. (This is how the browser extension works for supported browsers like Chrome/Edge/Firefox.) I don't know how to guarantee that with Fast Refresh though, since it gets auto-injected before any user code is run.