Error Invariant Violation Element type is invalid expected a string for built-in components or a class function but got object

0 votes

This is my code:

var React = require('react')
var ReactDOM =  require('react-dom')
var Router = require('react-router')
var Route = Router.Route
var Link = Router.Link

var App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
        </ul>
      </div>
    )
  }
})

var About = require('./components/Home')
ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
    </Route>
  </Router>
), document.body)

My Home.jsx file:

var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');

var Home = React.createClass({
  render:function() {
    return (
        <RaisedButton label="Default" />
    );
  },
});

module.exports = Home;

I am getting this error:

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

How to fix?

Jul 22, 2020 in Angular by kartik
• 37,530 points
1,682 views

1 answer to this question.

0 votes

Hello @kartik,

You need export default or require(path).default

var About = require('./components/Home').default

Hope it helps!!

Thank You!

answered Jul 22, 2020 by Niroj
• 82,880 points

Related Questions In Angular

0 votes
1 answer

What is $routeParams used for in Angularjs?

Angularjs routeParams is a service that allows ...READ MORE

answered Feb 7, 2020 in Angular by Niroj
• 82,880 points
979 views
0 votes
1 answer

How can I strip HTML tags from a string in ASP.NET?

Hello @Kartik, If it is just stripping all HTML tags ...READ MORE

answered Jul 23, 2020 in Angular by Niroj
• 82,880 points
394 views
0 votes
1 answer

How to know tools and bundlers after create a new workspace or a project in angular?

Hello @sajal, When you create projects and workspaces ...READ MORE

answered Aug 6, 2020 in Angular by Niroj
• 82,880 points
212 views
0 votes
1 answer

Error:Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Hello @kartik, It is happening because any where ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,880 points
1,529 views
0 votes
1 answer

From php returning JSON to JavaScript

Hii @kartik, You can use Simple JSON for PHP. ...READ MORE

answered Jun 5, 2020 in Java-Script by Niroj
• 82,880 points
288 views
0 votes
1 answer

Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Hello @kartik, You  just need to put your ...READ MORE

answered Jun 8, 2020 in Java-Script by Niroj
• 82,880 points
2,854 views
0 votes
1 answer

How to loop inside React JSX?

Hello @kartik, You're just calling JavaScript functions. You ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,880 points
488 views
0 votes
1 answer

Which module is used for routing in AngularJs?

The ngRoute module helps your application to become a ...READ MORE

answered Feb 4, 2020 in Angular by Niroj
• 82,880 points
148 views