mui / material-ui

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

Uncaught TypeError: Cannot read property 'muiName' of undefined at t.isMuiElement (reactHelpers.js:31) #13670

Closed hamedhossani closed 5 years ago

hamedhossani commented 5 years ago

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


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

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

oliviertassinari commented 5 years ago

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

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

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.

manaragr commented 1 year ago

hey im from the future and still having the same error even after correcting outline to outlined, I mean the browser is showing the needed view but in the devTools in the console, the huuuuugest error occured is it because of the conflict between the versions ?