Material-ui: Cannot read property 'root' of undefined for all components

[RZsam]

same problem as #15898 #16168 getting this error after migrating to v4 and didn't find any solution in mentioned issues

  app.js:3581 Uncaught TypeError: Cannot read property 
   'root' of undefined
   at Button (app.js:3581)
   at renderWithHooks (app.js:126202)
   at updateForwardRef (app.js:127721)
   at beginWork (app.js:128925)
   at performUnitOfWork (app.js:132576)
   at workLoop (app.js:132616)

  app.js:130381 The above error occurred in the 
  <WithStyles(ForwardRef(Button))> component:
  in WithStyles(ForwardRef(Button)) (created by Rtl)
  in StylesProvider (created by Rtl)
  in Rtl (created by App)
  in Provider (created by App)
  in App

this error shows up for every component I've imported.
package.json:

{
     "private": true,
     "dependencies": {
              "@date-io/date-fns": "^1.1.0",
              "@date-io/moment": "^1.1.0",
              "@fortawesome/react-fontawesome": "^0.1.4",
              "@material-ui/core": "^4.0.0",
              "@material-ui/styles": "^4.0.0",
              "@material-ui/icons": "^3.0.2",
              "@material-ui/lab": "^3.0.0-alpha.30",
              "@material-ui/pickers": "^3.1.0",
              "@tinymce/tinymce-react": "^2.4.0",
              "@types/googlemaps": "3.30.13",
              "@types/markerclustererplus": "2.1.33",
              "ajv": "^5.0.0",
              "babel": "^6.23.0",
              "babel-polyfill": "^6.26.0",
              "babel-preset-env": "^1.7.0",
              "babel-preset-react": "^6.24.1",
              "babel-preset-stage-2": "^6.24.1",
              "chartist": "0.10.1",
              "classnames": "2.2.6",
              "d3-drag": "^1.2.3",
              "d3-force": "^2.0.0",
              "d3-selection": "^1.4.0",
              "d3-shape": "^1.3.3",
              "d3-zoom": "^1.7.3",
              "date-fns": "^2.0.0-alpha.25",
              "dhtmlx-gantt": "^6.1.6",
              "downshift": "^3.2.2",
              "jquery": "^3.3.1",
              "jss": "^10.0.0-alpha.9",
              "jss-rtl": "^0.2.3",
              "material-ui-color-picker": "^3.2.0",
              "material-ui-pickers-jalali-utils": "^0.4.3",
              "moment": "^2.24.0",
              "moment-jalaali": "^0.8.1",
              "npm": "^6.9.0",
              "npm-run-all": "4.1.3",
              "path-to-regexp": "^2.4.0",
              "perfect-scrollbar": "1.4.0",
              "prop-types": "^15.6.2",
              "react": "^16.8.6",
              "react-dom": "^16.8.6",
              "react-chartist": "0.13.1",
              "react-loadable": "^5.5.0",
              "react-redux": "^5.1.1",
              "react-router-dom": "4.3.1",
              "react-scripts": "1.1.5",
              "react-select": "^2.1.2",
              "react-sizeme": "^2.6.7",
              "redux": "^4.0.1",
              "redux-form": "^7.4.2",
              "webpack": "^4.29.0"
                                 },
              "devDependencies": {
              "@babel/cli": "^7.0.0-beta.40",
              "@babel/plugin-proposal-class-properties": "^7.3.0",
              "@babel/preset-react": "^7.0.0-beta.40",
              "axios": "^0.17",
              "babel-cli": "6.26.0",
              "babel-core": "^7.0.0-bridge.0",
              "babel-loader": "^7.1.5",
              "babel-plugin-import-rename": "1.0.1",
              "babel-plugin-lodash": "^3.3.2",
              "babel-plugin-module-resolver": "3.1.1",
              "babel-plugin-react-transform": "^3.0.0",
              "babel-plugin-transform-object-rest-spread": "6.26.0",
              "babel-plugin-transform-react-jsx": "6.24.1",
              "babel-preset-es2015": "6.24.1",
              "compression-webpack-plugin": "^1.1.11",
              "cross-env": "^5.1",
              "file-loader": "^4.0.0",
              "laravel-mix": "^4.0.16",
              "lodash": "^4.17.4",
              "popper.js": "^1.12",
              "redux-devtools-extension": "^2.13.5",
              "resolve-url-loader": "^2.3.1",
              "sass": "^1.16.1",
              "sass-loader": "^7.1.0",
              "webpack-bundle-analyzer": "^3.0.3"
                                  }
                       }

I've removed /node_modules and yarn.lock and tried yarn

[oliviertassinari]

@RZsam Your issue has been closed because it does not conform to our issue requirements.
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!

[hlolli]

I'm also getting this issue after updateing MUI. Both TextField and Input are affected. I'm not even using withStyles in my webapp.

TextField.js:173 Uncaught TypeError: Cannot read property 'root' of undefined
    at TextField.js:173
    at renderWithHooks (react-dom.development.js:12939)
    at updateForwardRef (react-dom.development.js:14458)
    at beginWork (react-dom.development.js:15662)
    at performUnitOfWork (react-dom.development.js:19313)
    at workLoop (react-dom.development.js:19353)
    at HTMLUnknownElement.callCallback (react-dom.development.js:150)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:200)
    at invokeGuardedCallback (react-dom.development.js:257)
    at replayUnitOfWork (react-dom.development.js:18579)
(anonymous) @ TextField.js:173
renderWithHooks @ react-dom.development.js:12939
updateForwardRef @ react-dom.development.js:14458
beginWork @ react-dom.development.js:15662
performUnitOfWork @ react-dom.development.js:19313
workLoop @ react-dom.development.js:19353
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
replayUnitOfWork @ react-dom.development.js:18579
renderRoot @ react-dom.development.js:19469
performWorkOnRoot @ react-dom.development.js:20343
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21106
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:20
(anonymous) @ dom.cljs:44
(anonymous) @ dom.cljs:39
(anonymous) @ core.cljs:74
visitor$main$init @ main.cljs:198
(anonymous) @ main.cljs:200
goog.globalEval @ main.js?cache=1562603280348:827
shadow$cljs$devtools$client$browser$script_eval @ browser.cljs:52
shadow$cljs$devtools$client$browser$do_js_load @ browser.cljs:63
(anonymous) @ browser.cljs:77
(anonymous) @ env.cljs:225
shadow$cljs$devtools$client$env$do_js_reload_STAR_ @ env.cljs:197
(anonymous) @ env.cljs:233
shadow$cljs$devtools$client$browser$do_js_reload @ browser.cljs:69
(anonymous) @ browser.cljs:154
(anonymous) @ browser.cljs:100
goog.events.EventTarget.fireListeners @ eventtarget.js:285
goog.events.EventTarget.dispatchEventInternal_ @ eventtarget.js:383
goog.events.EventTarget.dispatchEvent @ eventtarget.js:196
goog.net.XhrIo.onReadyStateChangeHelper_ @ xhrio.js:872
goog.net.XhrIo.onReadyStateChangeEntryPoint_ @ xhrio.js:818
goog.net.XhrIo.onReadyStateChange_ @ xhrio.js:802
XMLHttpRequest.send (async)
goog.net.XhrIo.send @ xhrio.js:632
goog.net.XhrIo.send @ xhrio.js:357
shadow$cljs$devtools$client$browser$load_sources @ browser.cljs:92
shadow$cljs$devtools$client$browser$handle_build_complete @ browser.cljs:154
shadow$cljs$devtools$client$browser$handle_message @ browser.cljs:285
shadow$cljs$devtools$client$env$process_ws_msg @ env.cljs:165
(anonymous) @ browser.cljs:349
Show 12 more frames
react-dom.development.js:17118 The above error occurred in the <WithStyles(ForwardRef)> component:
    in WithStyles(ForwardRef) (created by visitor.main.footer)
    in form (created by visitor.main.footer)
    in div (created by visitor.main.footer)
    in div (created by visitor.main.footer)
    in footer (created by visitor.main.footer)
    in visitor.main.footer (created by reagent43)
    in ThemeProvider (created by reagent43)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by reagent43)
    in reagent43 (created by visitor.main.main)
    in visitor.main.main

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.
logCapturedError @ react-dom.development.js:17118
logError @ react-dom.development.js:17154
expirationTime.callback @ react-dom.development.js:18066
commitUpdateEffects @ react-dom.development.js:16434
commitUpdateQueue @ react-dom.development.js:16464
commitAllLifeCycles @ react-dom.development.js:17384
callCallback @ react-dom.development.js:150
invokeGuardedCallbackImpl @ react-dom.development.js:200
invokeGuardedCallback @ react-dom.development.js:257
commitRoot @ react-dom.development.js:18949
(anonymous) @ react-dom.development.js:20419
exports.unstable_runWithPriority @ scheduler.development.js:256
completeRoot @ react-dom.development.js:20418
performWorkOnRoot @ react-dom.development.js:20347
performWork @ react-dom.development.js:20255
requestWork @ react-dom.development.js:20229
scheduleWork @ react-dom.development.js:19912
updateContainerAtExpirationTime @ react-dom.development.js:20573
updateContainer @ react-dom.development.js:20658
ReactRoot.render @ react-dom.development.js:20954
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21106
render @ react-dom.development.js:21156
reagent$dom$render_comp @ dom.cljs:20
(anonymous) @ dom.cljs:44
(anonymous) @ dom.cljs:39
(anonymous) @ core.cljs:74
visitor$main$init @ main.cljs:198
(anonymous) @ main.cljs:200
goog.globalEval @ main.js?cache=1562603280348:827
shadow$cljs$devtools$client$browser$script_eval @ browser.cljs:52
shadow$cljs$devtools$client$browser$do_js_load @ browser.cljs:63
(anonymous) @ browser.cljs:77
(anonymous) @ env.cljs:225
shadow$cljs$devtools$client$env$do_js_reload_STAR_ @ env.cljs:197
(anonymous) @ env.cljs:233
shadow$cljs$devtools$client$browser$do_js_reload @ browser.cljs:69
(anonymous) @ browser.cljs:154
(anonymous) @ browser.cljs:100
goog.events.EventTarget.fireListeners @ eventtarget.js:285
goog.events.EventTarget.dispatchEventInternal_ @ eventtarget.js:383
goog.events.EventTarget.dispatchEvent @ eventtarget.js:196
goog.net.XhrIo.onReadyStateChangeHelper_ @ xhrio.js:872
goog.net.XhrIo.onReadyStateChangeEntryPoint_ @ xhrio.js:818
goog.net.XhrIo.onReadyStateChange_ @ xhrio.js:802
XMLHttpRequest.send (async)
goog.net.XhrIo.send @ xhrio.js:632
goog.net.XhrIo.send @ xhrio.js:357
shadow$cljs$devtools$client$browser$load_sources @ browser.cljs:92
shadow$cljs$devtools$client$browser$handle_build_complete @ browser.cljs:154
shadow$cljs$devtools$client$browser$handle_message @ browser.cljs:285
shadow$cljs$devtools$client$env$process_ws_msg @ env.cljs:165
(anonymous) @ browser.cljs:349
Show 14 more frames

[hlolli]

From the compiled non-source-mapped js code

return _react.default.createElement(_FormControl.default, (0, _extends2.default)({
    className: (0, _clsx.default)(classes.root, classNameProp)

seems as if the className prop can't be a string anymore? Must be an object.

To be added, I'm using vanilla react \

[oliviertassinari]

@hlolli The className still accept a string. Something must be wrong somewhere else. I would suspect an issue with the bundling stack of your project. We can't help without a reproduction.

[hlolli]

https://codesandbox.io/s/4j7m47vlm4?fontsize=14

Give it a quick try and I can't reproduce on this web editor. I'll look further into what's going on with the closure-compiler.

[hlolli]

Nevermind that url, I pressed share and copied the url, but it's just like how I started it with. :)

[RZsam]

https://github.com/mui-org/material-ui/issues/15898#issuecomment-507476163 solved the problem
@hlolli

[kjeske]

Removing node_modules and installing them again worked.

[qhxin]

TypeError: Cannot read property 'root' of undefined
IconButton
./node_modules/@material-ui/core/esm/IconButton/IconButton.js:124
  121 |     other = _objectWithoutProperties(props, ["edge", "children", "classes", "className", "color", "disabled", "disableFocusRipple", "size"]);
  122 | 
  123 | return React.createElement(ButtonBase, _extends({
> 124 |   className: clsx(classes.root, className, color !== 'default' && classes["color".concat(capitalize(color))], disabled && classes.disabled, {
  125 |     small: classes["size".concat(capitalize(size))]
  126 |   }[size], {
  127 |     start: classes.edgeStart,
View compiled

Same question, the props.classes is undefined.

[hlolli]

@RZsam thank you, adding hoist-non-react-statics did indeed fix it.

[qhxin]

TypeError: Cannot read property 'root' of undefined
IconButton
./node_modules/@material-ui/core/esm/IconButton/IconButton.js:124
  121 |     other = _objectWithoutProperties(props, ["edge", "children", "classes", "className", "color", "disabled", "disableFocusRipple", "size"]);
  122 | 
  123 | return React.createElement(ButtonBase, _extends({
> 124 |   className: clsx(classes.root, className, color !== 'default' && classes["color".concat(capitalize(color))], disabled && classes.disabled, {
  125 |     small: classes["size".concat(capitalize(size))]
  126 |   }[size], {
  127 |     start: classes.edgeStart,
View compiled

Same question, the props.classes is undefined.

I had fixed this bug yesterday.

The dep tree is:

# yarn list hoist-non-react-statics

├─ [email protected]
├─ [email protected]
│  └─ [email protected]
└─ [email protected]
   └─ [email protected]

The real used dep in bundle is [email protected], and webpack used module: node_modules/next/node_modules/hoist-non-react-statics.

And i found an important point: Versions prior to 3.x will not support ForwardRefs.

So i add [email protected] and changed webpack's resolve alias to force use [email protected].

package.json

  "dependencies": {
    ...
    "hoist-non-react-statics": "^3.3.1",
    ...
  }

webpack.config.js

      config.resolve.alias = {
            ...,
            'hoist-non-react-statics': path.resolve('./node_modules/hoist-non-react-statics'),
      }