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

RZsam · 2019-06-13T07:08:58Z

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

The text was updated successfully, but these errors were encountered:

oliviertassinari · 2019-06-13T08:19:17Z

@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 · 2019-07-08T16:38:14Z

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 · 2019-07-08T16:40:13Z

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 · 2019-07-08T18:57:56Z

@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 · 2019-07-08T19:25:29Z

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 · 2019-07-08T19:26:39Z

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

RZsam · 2019-07-09T09:44:13Z

#15898 (comment) solved the problem
@hlolli

kjeske · 2019-10-09T10:43:12Z

Removing node_modules and installing them again worked.

qhxin · 2019-12-13T10:15:21Z

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 · 2019-12-13T18:59:53Z

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

qhxin · 2019-12-16T02:18:18Z

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

oliviertassinari added the status: waiting for author Issue with insufficient information label Jun 13, 2019

oliviertassinari closed this as completed Jun 13, 2019

oliviertassinari added bug 🐛 Something doesn't work external dependency Blocked by external dependency, we can’t do anything about it and removed status: waiting for author Issue with insufficient information labels Dec 16, 2019

nastyaash mentioned this issue Jul 28, 2020

React/TypeScript IOS 12.1 TypeError #21978

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

RZsam commented Jun 13, 2019 •

edited

oliviertassinari commented Jun 13, 2019

hlolli commented Jul 8, 2019

hlolli commented Jul 8, 2019 •

edited

oliviertassinari commented Jul 8, 2019 •

edited

hlolli commented Jul 8, 2019

hlolli commented Jul 8, 2019

RZsam commented Jul 9, 2019 •

edited

kjeske commented Oct 9, 2019

qhxin commented Dec 13, 2019

hlolli commented Dec 13, 2019

qhxin commented Dec 16, 2019 •

edited

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

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

Comments

RZsam commented Jun 13, 2019 • edited

oliviertassinari commented Jun 13, 2019

hlolli commented Jul 8, 2019

hlolli commented Jul 8, 2019 • edited

oliviertassinari commented Jul 8, 2019 • edited

hlolli commented Jul 8, 2019

hlolli commented Jul 8, 2019

RZsam commented Jul 9, 2019 • edited

kjeske commented Oct 9, 2019

qhxin commented Dec 13, 2019

hlolli commented Dec 13, 2019

qhxin commented Dec 16, 2019 • edited

RZsam commented Jun 13, 2019 •

edited

hlolli commented Jul 8, 2019 •

edited

oliviertassinari commented Jul 8, 2019 •

edited

RZsam commented Jul 9, 2019 •

edited

qhxin commented Dec 16, 2019 •

edited