[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 <anonymous> (VM17 bundle.js:4698), <anonymous>:176:5) at eval (eval at <anonymous> (VM17 bundle.js:4698), <anonymous>:262:9) at eval (eval at <anonymous> (VM17 bundle.js:4698), <anonymous>:218:9) at HTMLUnknownElement.callCallback (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:188:14) at Object.invokeGuardedCallbackDev (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:237:16) at invokeGuardedCallback (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:292:31) at safelyCallDestroy (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:19650:5) at eval (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:20123:21) at unstable_runWithPriority (eval at <anonymous> (VM17 bundle.js:1512), <anonymous>:653:12) at runWithPriority$1 (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:11061:10) at commitUnmount (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:20116:15) at commitNestedUnmounts (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:20196:5) at unmountHostComponents (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:20476:7) at commitDeletion (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:20533:5) at commitMutationEffects (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:22813:11) at HTMLUnknownElement.callCallback (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:188:14) at Object.invokeGuardedCallbackDev (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:237:16) at invokeGuardedCallback (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:292:31) at commitRootImpl (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:22540:9) at unstable_runWithPriority (eval at <anonymous> (VM17 bundle.js:1512), <anonymous>:653:12) at runWithPriority$1 (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:11061:10) at commitRoot (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>: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

[Glebone23]

@R4DIC4L no, I didn’t configure jss-loader. Actually, my CSS processing configuration is very similar (slightly simplified) to the configuration which is used in react-scripts https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js#L107

[retronav]

@oliviertassinari this issue has happened with me, when using Menu and MenuItem(using latest version of Preact, with material UI). Will try to produce and give a reproduction ASAP.