Problem: Error message in chrome console Cannot read properties of null (reading '__jstcache').
Description: Using either CRA (create react app) or Vite (to create React file structure), my app refreshes fine when the Chrome developer console is not open or using Firefox. But on Chrome, when I open the developer console then refresh the page (or make a change to the code requiring a hot module load), I get the error above and a default page suggesting offline but the computer is still online. If I either close the console or switch to another tab the app will refresh properly.
Solve(s): Unknown. I can't find much on this issue via Google searches. I don't believe it's an issue with my code. As a proof point, I created an App with both the Vite and CRA (create react app) without inserting any code. The issue persists. I encounter the same with say www.google.com (reloads just fine without the console open but get the same error when I open the console). I've tried clear the browser cache, reset the brower settings, disable all chrome extensions, turn off and on the computer at minimum. My last test was to see if the same issue existed if I opened the apps via Firefox. I didn't have any issues refreshing with the console open or closed in Firefox. I also checked chatGPT. It suggested an issue with jest cache so I cleared that cache but didn't help. I stopped short of complete uninstalling Chrome mostly because I have some scripts that I don't want to lose but I guess that's a next step.
Video: A video link will be posted soon to provide screenshots and behavior. https://youtu.be/H57sf3HSXdg
Environment: MacBook Pro. MacOS Sonoma 14.2.1. Chrome Version 120.0.6099.216 (Official Build) (x86_64)
Error Detail: Here is the error in the developer console along with each step in the stack.
VM7:3 Uncaught TypeError: Cannot read properties of null (reading '__jstcache')
at L (VM7:3:272)
at window.jstProcess (VM7:10:576)
at VM8:1:488
(VM7:3:272)
function L(a) {
a.__jstcache || n(a, function(b) {
M(b)
})
(VM7:10:576)
window.jstProcess = function(a, b) {
var c = new F;
L(b);
c.m = b ? 9 == b.nodeType ? b : b.ownerDocument || document : document;
var e = m(c, c.g, a, b)
, d = c.j = []
, g = c.o = [];
c.c = [];
e();
for (var h, f, k; d.length; )
h = d[d.length - 1],
e = g[g.length - 1],
e >= h.length ? (e = c,
f = d.pop(),
f.length = 0,
e.c.push(f),
g.pop()) : (f = h[e++],
k = h[e++],
h = h[e++],
g[g.length - 1] = e,
f.call(c, k, h))
}
(VM8:1:488)
const pageData = {
"app_short_name": "Create React App Sample",
"fontfamily": "system-ui, sans-serif",
"fontfamilyMd": "system-ui, sans-serif",
"fontsize": "75%",
"icon_url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR42mMAAQAABQABoIJXOQAAAABJRU5ErkJggg==",
"language": "en",
"override_error_page": true,
"supplementary_icon": "offlineIcon",
"textdirection": "ltr",
"title": "localhost",
"web_app_error_page_message": "You're offline"
};
var tp = document.getElementById('t');
jstProcess(new JsEvalContext(pageData), tp);