search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.09k stars 32.34k forks source link

Cannot read property 'root' of undefined for all components #16202

Closed RZsam closed 5 years ago

RZsam commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 \<form> element around TextField/Input, maybe a big factor of this issue.

oliviertassinari commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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

RZsam commented 5 years ago

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

kjeske commented 5 years ago

Removing node_modules and installing them again worked.

qhxin commented 4 years ago 
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 commented 4 years ago

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

qhxin commented 4 years ago 
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

├─ hoist-non-react-statics@3.3.1
├─ mini-store@1.1.2
│  └─ hoist-non-react-statics@2.5.5
└─ next@7.0.3
   └─ hoist-non-react-statics@2.5.5

The real used dep in bundle is hoist-non-react-statics@2.5.5, 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 hoist-non-react-statics@3.3.1 and changed webpack's resolve alias to force use hoist-non-react-statics@3.3.1.

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'),
      }