Material-ui: Uncaught TypeError: Cannot read property 'muiName' of undefined at t.isMuiElement (reactHelpers.js:31)

[hamedhossani]

Hi,
I have this problem when browse in chrome.
this is my package.json

"scripts": { "start": "concurrently \"webpack \" \"node app.js\"", "prod": "node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js", "dev": "webpack --mode development", "build": "webpack --mode production" }, "dependencies": { "@babel/core": "^7.1.6", "@babel/preset-env": "^7.1.6", "@fortawesome/fontawesome": "^1.1.0", "@fortawesome/fontawesome-free-brands": "^5.0.2", "@fortawesome/fontawesome-free-regular": "^5.0.2", "@fortawesome/fontawesome-free-solid": "^5.0.2", "@fortawesome/react-fontawesome": "0.0.17", "@google-cloud/storage": "^1.5.1", "@material-ui/core": "^1.5.1", "@material-ui/icons": "^3.0.1", "autosuggest-highlight": "^3.1.1", "babel-cli": "^6.26.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.2", "babel-plugin-syntax-async-functions": "^6.13.0", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "babel-runtime": "^6.26.0", "body-parser": "^1.18.2", "braintree": "^2.4.0", "braintree-web-drop-in": "^1.9.2", "classnames": "^2.2.5", "concurrently": "^3.6.1", "css-loader": "^0.28.7", "dotenv": "^4.0.0", "express": "^4.16.2", "firebase": "^4.7.0", "firebase-admin": "^5.5.1", "g": "^2.0.1", "material-ui-form": "^1.0.0-alpha.26", "npm-check-updates": "^2.14.3", "react": "^16.6.3", "react-addons-update": "^15.6.2", "react-autosuggest": "^9.3.2", "react-cookie": "^3.0.4", "react-dom": "^16.6.3", "react-google-maps": "^7.1.0", "react-paypal-express-checkout": "^1.0.3", "react-redux": "^5.1.1", "react-router": "^4.3.1", "react-router-dom": "^4.3.1", "react-scripts": "^2.1.1", "react-swipeable-views": "^0.12.12", "recompose": "^0.30.0", "redux": "^3.7.2", "redux-thunk": "^2.2.0", "shortid": "^2.2.14", "smoothscroll": "^0.4.0", "universal-cookie": "^3.0.4", "url-loader": "^0.6.2", "whatwg-fetch": "^2.0.3" }, "devDependencies": { "@babel/runtime": "^7.0.0", "webpack": "^4.25.1", "webpack-cli": "^3.1.2", "webpack-dev-server": "^2.7.1", "wepack": "0.0.1" } }
what is the solution?
thanks.

[eps1lon]

Please add the stacktrace and if possible a minimal reproducible example.

[oliviertassinari]

I follow up on @eps1lon's comment. We can't help without a minimal reproduction example. We are happy to reopen the issue once you have one.

[hamedhossani]

when i use <List> <ListItem> in <DialogContent> that error is showed.
https://stackoverflow.com/questions/53445921/how-can-i-resolve-this-error-cannot-read-property-muiname-of-undefined-at-t-is

[coolbeatz71]

Hey @hamedhossani the answer here can help you https://stackoverflow.com/a/59529633/8124496

I also had the same issue when trying to wrap the TextField component, here was my code snippet code

const TextInput = ({ variant, id, label, autoFocus, isRequired, multiline, rows }) => {
  return (
    <div>
      <TextField
        fullWidth
        margin="normal"
        variant={variant}
        required={isRequired}
        id={id}
        name={id}
        autoComplete={id}
        label={label}
        autoFocus={autoFocus}
        multiline={multiline}
        rows={rows}
      />
    </div>
  );
};

TextInput.propTypes = {
  id: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  variant: PropTypes.string,
  autoFocus: PropTypes.bool,
  isRequired: PropTypes.bool,
  multiline: PropTypes.bool,
  rows: PropTypes.string,
};

TextInput.defaultProps = {
  variant: 'outline',
  autoFocus: false,
  isRequired: true,
  multiline: false,
  rows: '6',
};

I realized that I did not properly write the value for the variant props. It should be outlined instead of outline. Correcting this typo error fixed the issue.

So, check your property values. This type of error may be also coming from there.