[styles][makeStyles] Uncaught TypeError: Cannot read property 'refs' of undefined in detach function

When using makeStyles hook on the start-up page (e.g.: Login) of a React application, the page doesn't load sometimes in development mode and below error is encountered.

VM677:176 Uncaught TypeError: Cannot read property 'refs' of undefined
at detach (eval at (VM17 bundle.js:4698), :176:5)
at eval (eval at (VM17 bundle.js:4698), :262:9)
at eval (eval at (VM17 bundle.js:4698), :218:9)
at HTMLUnknownElement.callCallback (eval at (VM17 bundle.js:1500), :188:14)
at Object.invokeGuardedCallbackDev (eval at (VM17 bundle.js:1500), :237:16)
at invokeGuardedCallback (eval at (VM17 bundle.js:1500), :292:31)
at safelyCallDestroy (eval at (VM17 bundle.js:1500), :19650:5)
at eval (eval at (VM17 bundle.js:1500), :20123:21)
at unstable_runWithPriority (eval at (VM17 bundle.js:1512), :653:12)
at runWithPriority$1 (eval at (VM17 bundle.js:1500), :11061:10)
at commitUnmount (eval at (VM17 bundle.js:1500), :20116:15)
at commitNestedUnmounts (eval at (VM17 bundle.js:1500), :20196:5)
at unmountHostComponents (eval at (VM17 bundle.js:1500), :20476:7)
at commitDeletion (eval at (VM17 bundle.js:1500), :20533:5)
at commitMutationEffects (eval at (VM17 bundle.js:1500), :22813:11)
at HTMLUnknownElement.callCallback (eval at (VM17 bundle.js:1500), :188:14)
at Object.invokeGuardedCallbackDev (eval at (VM17 bundle.js:1500), :237:16)
at invokeGuardedCallback (eval at (VM17 bundle.js:1500), :292:31)
at commitRootImpl (eval at (VM17 bundle.js:1500), :22540:9)
at unstable_runWithPriority (eval at (VM17 bundle.js:1512), :653:12)
at runWithPriority$1 (eval at (VM17 bundle.js:1500), :11061:10)
at commitRoot (eval at (VM17 bundle.js:1500), :22412:3)

From Chrome debugger, it seems that, in the makeStyles detach function, an undefined error is thrown for the sheetManager object (see image below).

After the error is thrown, the screen goes white.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

A Uncaught TypeError: Cannot read property 'refs' of undefined appears when the makeStyles detach function is called and sheetManager object in the following line is undefined. Also, the screen of the web application goes white.

let sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);

Expected Behavior 🤔

sheetManager should not be undefined or a guard should be added to the subsequent code using it.

Steps to Reproduce 🕹

I have not found an exact cause for this, sheetManager is set in attach function, but seems to not be found in a subsequent call to detach. Maybe a missing attach call or refs going to 0. A line below removes the sheetManager from the multiKeyStore.

multiKeyStore.delete(stylesOptions.sheetsManager, stylesCreator, theme);

Context 🔦

I am getting a console error when this happens and the application screen is not loading. On subsequent tab loads, the app reloads.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.7
React	16.13.0
Browser	Google Chrome
TypeScript	No
Babel ES6	Yes

Start by tracing the makeStyles attach and detach functions, especially the sheetManager lookup through multiKeyStore.get and its removal through multiKeyStore.delete. Reproduce the intermittent startup failure in the reported React and Chrome environment, then verify that unmounting no longer throws the refs error or leaves the screen white.