Error React createElement type is invalid expected a string for built-in components or a class function for composite components but got object

0 votes

I should be able to export my App component file and import it into my index.js.

I get the following error

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object

My index.js

const React = require('react');
const ReactDOM = require('react-dom');
const App = require('./components/App');
require('./index.css');

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

Then in my components/App.js

const React = require('react');

export default class App extends React.Component {
    render() {
        return (
            <div>
                Hell World! Wasabi Sauce!
            </div>
        );
    }
}

// module.exports = App;

If I uncomment module.exports = App; it will work, but I'm trying to use the export syntax. In another project I am doing the exact same thing here and it's working fine

Jun 4, 2020 in Angular by kartik
• 37,530 points
27,931 views

2 answers to this question.

0 votes

Hello @kartik,

I was facing same issue, i did this trick, worked for me,

You just need to put export before class App,

export class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

you can also check your router you are using, I have used this works for me,

npm install react-router-dom@next --save

Hope it work!!

answered Jun 4, 2020 by Niroj
• 82,840 points
Yeah it worked. But why do we need to do so ? I'd already exported using 'export default App'
0 votes

The issue you have encountered was caused by mixing two different module systems which differ in the way they are resolved and implementedCommonJS modules are dynamic and contrary to that ES6 modules are statically analyzable.

Tools like Babel transpile ES6 modules to CommonJS as of now because native support is not ready yet. But, there are subtle differences. By using default export (exports default) the transpiler emitted a CommonJS module with { default } property as there can be named and default export alongside in ES6 module. The following example is a perfectly valid ES6 module:

export default class Test1 { }
export class Test2 { }

This would result in { default, Test2 } CommonJS module after transpiling and by using require you get that object as a return value.

In order to import ES6 module's default export in CommonJS you must use require(module).default syntax by the reasons mentioned above.

answered Dec 16, 2020 by Gitika
• 65,970 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,840 points
968 views
0 votes
1 answer

How do you import a javascript package from a cdn/script tag in React?

Hello, Go to the index.html file and import ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,840 points
14,060 views
0 votes
1 answer

Error:XMLHttpRequest GET not working in React.js

Hello @kartik, You should populate data with AJAX ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,840 points
1,091 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,840 points
1,520 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,840 points
283 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,840 points
2,824 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,840 points
484 views
0 votes
1 answer

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

Hello @kartik, You need export default or require(path).default var ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,840 points
1,675 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,840 points
146 views