Bug: markInternalModuleRanges undefined

[crodriguez-plitzi]

Testing react 18 im getting this error

React version: https://unpkg.com/react-dom@18.0.0-alpha-a44a7a2a3-20211111/umd/react-dom.development.js

wants to add that in this version: https://unpkg.com/react-dom@18.0.0-alpha-05726d72c-20210927/umd/react-dom.development.js no happens, so probably a recent change affected this

File Related: https://github.com/facebook/react/blob/1bf6deb865052111474f2988bb831de13d09c560/packages/react-reconciler/src/SchedulingProfiler.js

Steps To Reproduce

cant reproduce this for the moment, happens randomly and had to downgrade the version

Link to code example:

cant reproduce it, happens randomly

The current behavior

in some cases is undefined

The expected behavior

should not be undefined

[bvaughn]

@crodriguez-plitzi Can you tell me more about the cases when you're able to repro it (or give me a link to a page where it happens, even if only sometimes)? Which version of React DevTools do you have installed?

Looking at the code, I don't see how the error in your title is possible:

markInternalModuleRanges undefined

The error in the screenshot is different though:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')

Looks like that error is probably coming from theranges.length chunk in this section of code:

react/packages/react-reconciler/src/SchedulingProfiler.js

Lines 101 to 109 in 1bf6deb

	function markInternalModuleRanges() {
	/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
	if (
	typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
	typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges === 'function'
	) {
	const ranges = __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges();
	for (let i = 0; i < ranges.length; i++) {
	const [startStackFrame, stopStackFrame] = ranges[i];

Looking at the DevTools code though, it doesn't seem like this should be possible:

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

Line 496 in 56efc65

const moduleRanges: Array<[StackFrameString, StackFrameString]> = [];

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

Lines 504 to 508 in 56efc65

	function getInternalModuleRanges(): Array<
	[StackFrameString, StackFrameString],
	> {
	return moduleRanges;
	}

So...which version of DevTools do you have installed? Maybe we can look at that next?

Maybe something else is overriding the DevTools hook? I can add an undefined guard to this piece of code but it doesn't seem like it should be possible.

[bvaughn]

@crodriguez-plitzi Can you try this build of react-dom (built from #22748) and tell me if it fixes the problem for you?

https://gist.githubusercontent.com/bvaughn/7eb07ebd45aabae603086ad544f917bc/raw/d35273000314deecdd9ec8a2a2adc448b3635a48/react-dom.development.js

[crodriguez-plitzi]

@bvaughn give me 5 mins to test it

[bvaughn]

Sure thing! :)

I'm pretty curious what's going on here. It seems unlikely that something else would be overriding the DevTools hook and injecting its own implementation of getInternalModuleRanges but looking at the code, that's my best idea at the moment.

Regardless, hopefully the updated build I shared will fix it.

[crodriguez-plitzi]

@bvaughn cant use it because is not UMD, i am using the CDN

<script crossorigin src="https://unpkg.com/react-dom@alpha/umd/react-dom.development.js"></script>

but reading the code im pretty sure will works because ranges was coming undefined

[bvaughn]

Gotcha.

In that case, I'll merge the fix and you can verify it tomorrow when the next alpha release is published.

[crodriguez-plitzi]

@bvaughn thanks friend could be interesting to investigate why randomly got undefined, but i was not able to reproduce it, i just think that can be related to iframes and createPortal but im not sure

and the second thing is that im compiling my project with webpack 4 and react/react-dom marked as external