Open R4DIC4L opened 4 years ago
oliviertassinari
commented
4 years ago Please provide a full reproduction test case. This would help a lot 👷 . A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!
R4DIC4L
commented
4 years ago I have sent a PR for this issue at https://github.com/mui-org/material-ui/pull/20185
retronav
commented
3 years ago @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.
oliviertassinari
commented
3 years ago @obnoxiousnerd It could also be an issue in the order Preact calls hooks (or at least be different from React). It would probably be best to isolate the different with React and report the issue to the Preact's team.
Glebone23
commented
3 years ago have the same issue, @R4DIC4L did you find a solution of how to fix this problem?
R4DIC4L
commented
3 years ago @Glebone23 Unfortunately not, we are still facing this issue when our Login page loads (it has MUI text fields for username and password, plus a checkbox for the "Remember me" function), but it only happens in development mode. This means that our application goes blank when we try to access the localhost URL. As a workaround, we have noticed that if we change tabs before the page loads, the white screen does not occur anymore. But this requires a couple of tries sometimes and burdens the development experience.
@oliviertassinari We are using React, not Preact, and the issue still occurs. It might be that there is a problem in MUI, with a hook being called in a class component (we use only class components, we have an old project), there was another error pointing to this (I will come back to you with the error tomorrow). Or it might be related to the project build (e.g.: babel) configuration.
We have a lot of packages, but I realize that an isolated example would be helpful for the MUI team to solve this. @Glebone23, if you have the possibility to provide a code sandbox reproducing the issue, please go ahead.
R4DIC4L
commented
3 years ago @oliviertassinari If it helps, I have the following additional errors to the Cannot read property 'refs' of undefined from the description of the GitHub issue:
VM164:11102
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
at Object.throwInvalidHookError (eval at <anonymous> (VM13 bundle.js:1662), <anonymous>:14724:13)
at Object.useContext (eval at <anonymous> (VM13 bundle.js:1638), <anonymous>:1493:21)
at useTheme (eval at <anonymous> (VM13 bundle.js:4440), <anonymous>:15:30)
at ThemeProvider (eval at <anonymous> (VM13 bundle.js:4530), <anonymous>:50:42)
at renderWithHooks (eval at <anonymous> (VM13 bundle.js:1662), <anonymous>:14803:18)
at mountIndeterminateComponent (eval at <anonymous> (VM13 bundle.js:1662), <anonymous>:17482:13)
at beginWork (eval at <anonymous> (VM13 bundle.js:1662), <anonymous>:18596:16)
at HTMLUnknownElement.callCallback (eval at <anonymous> (VM13 bundle.js:1662), <anonymous>:188:14)
at Object.invokeGuardedCallbackDev (eval at <anonymous> (VM13 bundle.js:1662), <anonymous>:237:16)
at invokeGuardedCallback (eval at <anonymous> (VM13 bundle.js:1662), <anonymous>:292:31)
at beginWork$1 (eval at <anonymous> (VM13 bundle.js:1662), <anonymous>:23203:7)
at performUnitOfWork (eval at <anonymous> (VM13 bundle.js:1662), <anonymous>:22154:12)
at workLoopSync (eval at <anonymous> (VM13 bundle.js:1662), <anonymous>:22130:22)
at performSyncWorkOnRoot (eval at <anonymous> (VM13 bundle.js:1662), <anonymous>:21756:9)
at eval (eval at <anonymous> (VM13 bundle.js:1662), <anonymous>:11089:24)
at unstable_runWithPriority (eval at <anonymous> (VM13 bundle.js:1674), <anonymous>:653:12)
at runWithPriority$1 (eval at <anonymous> (VM13 bundle.js:1662), <anonymous>:11039:10)
at flushSyncCallbackQueueImpl (eval at <anonymous> (VM13 bundle.js:1662), <anonymous>:11084:7)
at flushSyncCallbackQueue (eval at <anonymous> (VM13 bundle.js:1662), <anonymous>:11072:3)
at discreteUpdates$1 (eval at <anonymous> (VM13 bundle.js:1662), <anonymous>:21893:7)
at discreteUpdates (eval at <anonymous> (VM13 bundle.js:1662), <anonymous>:806:12)
at dispatchDiscreteEvent (eval at <anonymous> (VM13 bundle.js:1662), <anonymous>:4168:3)AND
react-dom.development.js?d4d0:7607
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?
at removeChildFromContainer (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:7607:15)
at unmountHostComponents (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:20447:9)
at commitDeletion (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:20500:5)
at commitMutationEffects (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:22782:11)
at HTMLUnknownElement.callCallback (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:188:14)
at Object.invokeGuardedCallbackDev (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:237:16)
at invokeGuardedCallback (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:292:31)
at commitRootImpl (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:22509:9)
at unstable_runWithPriority (eval at <anonymous> (http://localhost:8080/bundle.js:1674:2), <anonymous>:653:12)
at runWithPriority$1 (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:11039:10)
at commitRoot (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:22381:3)
at finishSyncRender (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:21807:3)
at performSyncWorkOnRoot (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:21793:7)
at eval (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:11089:24)
at unstable_runWithPriority (eval at <anonymous> (http://localhost:8080/bundle.js:1674:2), <anonymous>:653:12)
at runWithPriority$1 (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:11039:10)
at flushSyncCallbackQueueImpl (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:11084:7)
at flushSyncCallbackQueue (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:11072:3)
at scheduleUpdateOnFiber (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:21199:9)
at updateContainer (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:24373:3)
at legacyRenderSubtreeIntoContainer (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:24774:5)
at Object.render (eval at <anonymous> (http://localhost:8080/bundle.js:1662:2), <anonymous>:24840:10)I also have below error, I am not sure if it is related to the above error and white screen or if it has to do with how the MUI theme is applied in our project.
VM164:19527
The above error occurred in the <ThemeProvider> component:
in ThemeProvider
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.AND
The above error occurred in the <WithStyles(memo)> component:
in WithStyles(memo) (created by ForwardRef(ButtonBase))
in span (created by ForwardRef(ButtonBase))
in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase)))
in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(IconButton))
in ForwardRef(IconButton) (created by WithStyles(ForwardRef(IconButton)))
in WithStyles(ForwardRef(IconButton)) (created by ForwardRef(SwitchBase))
in ForwardRef(SwitchBase) (created by WithStyles(ForwardRef(SwitchBase)))
in WithStyles(ForwardRef(SwitchBase)) (created by ForwardRef(Checkbox))
in ForwardRef(Checkbox) (created by WithStyles(ForwardRef(Checkbox)))
in WithStyles(ForwardRef(Checkbox)) (created by CheckboxInput)
in label (created by ForwardRef(FormControlLabel))
in ForwardRef(FormControlLabel) (created by WithStyles(ForwardRef(FormControlLabel)))
in WithStyles(ForwardRef(FormControlLabel)) (created by CheckboxInput)
in div (created by ForwardRef(FormControl))
in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
in WithStyles(ForwardRef(FormControl)) (created by CheckboxInput)
in CheckboxInput (created by ConnectedField)
in ConnectedField (created by ConnectFunction)
in ConnectFunction (created by Connect(ConnectedField))
in Connect(ConnectedField) (created by Field)
in Field (created by Context.Consumer)
in Hoc (created by Field)
in Field (created by MUICheckboxComponent)
in MUICheckboxComponent (created by Login)
in div (created by Login)
in div (created by Login)
in div (created by Login)
in div (created by Login)
in form (created by Login)
in Login (created by Form(Login))
in Form(Login) (created by ConnectFunction)
in ConnectFunction (created by Connect(Form(Login)))
in Connect(Form(Login)) (created by ReduxForm)
in ReduxForm (created by Context.Consumer)
in Hoc (created by ReduxForm)
in ReduxForm (created by WithTheme(ReduxForm))
in WithTheme(ReduxForm) (created by LoginView)
in div (created by LoginView)
in LoginView (created by ConnectFunction)
in ConnectFunction (created by RouterContext)
in div (created by App)
in App (created by ConnectFunction)
in ConnectFunction (created by RouterContext)
in RouterContext (created by Router)
in Router
in MuiPickersUtilsProvider
in IntlProvider (created by ConnectFunction)
in ConnectFunction
in Provider
in ThemeProvider@Glebone23 Do you also receive the same additional errors?
R4DIC4L
commented
3 years ago The versions used for the relevant packages (MUI, react, react-dom) when having this error are:
+-- @material-ui/codemod@4.5.0
+-- @material-ui/core@4.9.10
+-- @material-ui/icons@4.9.1
+-- @material-ui/lab@4.0.0-alpha.49
+-- @material-ui/pickers@3.2.10
+-- @material-ui/system@4.9.10
+-- prop-types@15.7.2
+-- react@16.14.0
+-- react-dom@16.14.0
+-- webpack@1.15.0The following MUI fields/functions are used:
import { withTheme } from '@material-ui/core/styles'; // for theming the form
import TextField from '@material-ui/core/TextField'; // for Username and Password fields
import { FormHelperText, FormControl, FormControlLabel, Checkbox } from '@material-ui/core'; // for a "Remember me" checkbox
import Button from '@material-ui/core/Button'; // for the submit button
lfrprazeres
commented
3 years ago Hey guys, I faced this issue and realized that I didn't use the Githubissues.
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.
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.
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 🌎