{"id":95,"hash":"da5516121c32ef1059fc9c1e459422996a9c47d42cf801c7e695ee1087d2872f","pattern":"Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object","full_message":"I am getting this error:\n\nUncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.\n\nThis is my code:\n\nvar React = require('react')\nvar ReactDOM =  require('react-dom')\nvar Router = require('react-router')\nvar Route = Router.Route\nvar Link = Router.Link\n\nvar App = React.createClass({\n  render() {\n    return (\n      <div>\n        <h1>App</h1>\n        <ul>\n          <li><Link to=\"/about\">About</Link></li>\n        </ul>\n      </div>\n    )\n  }\n})\n\nvar About = require('./components/Home')\nReactDOM.render((\n  <Router>\n    <Route path=\"/\" component={App}>\n      <Route path=\"about\" component={About} />\n    </Route>\n  </Router>\n), document.body)\n\nMy Home.jsx file:\n\nvar React = require('react');\nvar RaisedButton = require('material-ui/lib/raised-button');\n\nvar Home = React.createClass({\n  render:function() {\n    return (\n        <RaisedButton label=\"Default\" />\n    );\n  },\n});\n\nmodule.exports = Home;","ecosystem":"npm","package_name":"node.js","package_version":null,"solution":"In my case (using Webpack) it was the difference between:\n\nimport {MyComponent} from '../components/xyz.js';\n\nvs\n\nimport MyComponent from '../components/xyz.js';\n\nThe second one works while the first is causing the error. Or the opposite.","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string","votes":859,"created_at":"2026-04-19T04:41:18.786354+00:00","updated_at":"2026-04-19T04:51:05.196741+00:00"}