Fast Refresh: Improve dev experience when DevTools hook is disabled

[Sinsstranger]

The crash is likely being caused by some third party code (possibly a browser extension) injecting a partial DevTools hook into the page. (See below comments for more information.)

We can't prevent this but Fast Refresh could more gracefully handle this case by checking to see if window. __REACT_DEVTOOLS_GLOBAL_HOOK__.isDisabled is true (like we do here). Rather than crash, Fast Refresh could print a warning to the console in DEV mode saying that it won't run because of the disabled hook override.

---

Original report: Crash with "hook.renderers is undefined"

---

I have a bit problem, when i just do yarn create react-app name --template redux, and start it to learn how to develop - I saw next:
On localhost(it's vmware virtualhost) I have no problem, but on host machine i see Uncaught TypeError: hook.renderers is undefined in js console, and empty body

How can I handle it? And what this error means in general?

[bvaughn]

What browser extensions are installed on your local machine? It seems like something else might be interfering with the window.__REACT_DEVTOOLS_GLOBAL_HOOK__ variable. The expectation is that either React DevTools (v4+) or the Fast Refresh runtime will be the only thing that create or use that hook.

react/packages/react-devtools-shared/src/backend/index.js

Lines 90 to 93 in 779a472

	// Connect renderers that have already injected themselves.
	hook.renderers.forEach((renderer, id) => {
	attachRenderer(id, renderer);
	});

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

Lines 482 to 485 in 779a472

	// Do the same for any already injected roots.
	// This is useful if ReactDOM has already been initialized.
	// https://github.com/facebook/react/issues/17626
	hook.renderers.forEach((injected, id) => {

DevTools initializes the hook with a renderers map specifically for Fast Refresh:

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

Lines 313 to 325 in 779a472

	Object.defineProperty(
	target,
	'__REACT_DEVTOOLS_GLOBAL_HOOK__',
	({
	// This property needs to be configurable for the test environment,
	// else we won't be able to delete and recreate it beween tests.
	configurable: __DEV__,
	enumerable: false,
	get() {
	return hook;
	},
	}: Object),
	);

Fast Refresh does the same if DevTools wasn't around to initialize the hook:

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

Lines 439 to 442 in 779a472

	// 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) {

So my guess is that you have some other extension installed (possibly even a really old version of React DevTools?) that's initializing window.__REACT_DEVTOOLS_GLOBAL_HOOK__ first but not properly setting up the renderers map.

[Sinsstranger]

I have set up the React DevTools 4.9.0(last version) - to my host machine, and now i have no problem on it, on virtual machine then I have my dev envirironment(phpstorm, create-react app etc.) I have no problem as erlier. Indeed all problem was in the DevTools didn't installed on my host machine?! (excause me for my bad english). I checked it and I saw that problem was in it!

[bvaughn]

Indeed all problem was in the DevTools didn't installed on my host machine?

No. The React DevTools extension should not be required. Fast Refresh will check to see if DevTools isn't installed and will initialize the hook itself:

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

Lines 439 to 466 in 779a472

	// 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() {},
	};
	}

My guess was that something else (another extension?) was initializing the hook so that this Fast Refresh check didn't pass:

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

Line 442 in 779a472

if (hook === undefined) {

But this line later throws:

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

Line 485 in 779a472

hook.renderers.forEach((injected, id) => {

[bvaughn]

@Sinsstranger Can you reproduce this error in an incognito window (with all extensions disabled)?

[Sinsstranger]

Yes i have this problem with it bouth incognito, and not incognito mode with all extensions disabled

[gaearon]

@Sinsstranger If you log window.__REACT_DEVTOOLS_GLOBAL_HOOK__, what do you see? My guess is that you're using some hack to disable React DevTools in production (e.g. by assigning an empty object to it), which in turn causes this issue.

[Sinsstranger]

On localhost(it's virtual machine) where I learn React without some extensions I have no problem
console.log(window.REACT_DEVTOOLS_GLOBAL_HOOK) returns

On PC in Local Network(it's machine with vmware workstation, and on it I have virtual machine where I learn React) without extension reactDevTools I have our problem
console.log(window.REACT_DEVTOOLS_GLOBAL_HOOK) returns

And with ReactDevTools on it I have no problem and console.log(window.REACT_DEVTOOLS_GLOBAL_HOOK) returns

[bvaughn]

On PC in Local Network(it's machine with vmware workstation, and on it I have virtual machine where I learn React) without extension reactDevTools I have our problem console.log(window.REACT_DEVTOOLS_GLOBAL_HOOK) returns

The output logged by this machine does not look like anything we (React or DevTools) inject. Something else is setting the value of __RECT_DEVTOOLS_GLOBAL_HOOK__.

Can you add this code to your app (at the top, before other scripts are loaded) and see if it logs anything?

let hook;
Object.defineProperty(window, '__REACT_DEVTOOLS_GLOBAL_HOOK__', {
  get() {
    return hook;
  },
  set(value) {
    console.trace('hook initialized:', value);
    hook = value;
  }
});

[gaearon]

Do you use React with any third-party renderers?

[VoliBearCat]

I has same problem, update the React DevTools extensions version and fixed it