This article will show you how to fix the error “Element type is invalid, expected a string (for built in components) or a class/function but got“. You can use the Remove {} function or Use require(path).default method to handle it. Let’s go into detail now.
React component, elements and instances
If you’re new to React, you probably already know a little about instances and component classes. For instance, when you create a class to create a component button. There will be multiple instances of the Button component on the screen when the application is run, each with its local state and properties. Setting up object-oriented UI in this manner is standard practice.
When the element type is a string, it represents a DOM node with the string’s tag name and props for its attributes. React will render that way.
When we want to create an element tree, it is standard practice to specify one or more child elements as the children’s props of the component that it belongs to.
Some ways to solve the problem “Element type is invalid, expected a string (for built in components) or a class/function but got”
Here are some ways to fix this error in specific cases. You can refer to the fixes to apply to your code. Let’s follow along.
Remove {} operator
In this way, we will fix this error in the case of using webpack. You can remove the {} operator so the program can recognize the component.
Code:
import {LearnShareITComponent} from '../components/xyz.js';You can change the code:
import LearnShareITComponent from '../components/xyz.js';This can make the program not confused with an object.
Use require(path).default method
This way, you will export the default component or use the default component declaration with the required (path)—default syntax, with the path being the path to the file containing that component.
Code:
var Home = require('./components/Home').default
// Or
export default Home;Correct the wrong comment symbol
Or, in this case, it will be a less common cause of this error. However, you may be experiencing this as well. In the component, if you use the whole line comment syntax without the “{}” at the ends, you should add it.
Code:
<Tag> /*{ oldComponent }*/ { newComponent } </Tag>After adding it to the comment section, we will have a new code.
<Tag> {/*{ oldComponent }*/} { newComponent } </Tag>I hope the ways in this article will help you.
Summary
To summarize, this article will show you some ways to fix the “element type is invalid, expected a string (for built in components) or a class/function but got” error. Consider each specific example and understand how to debug. Let’s try these methods to get your desired results!
Maybe you are interested:
- “Cannot find module ‘express’ error” in Node.js
- document.getElementsByClass is not a Function in JavaScript
- Module not found: Can’t resolve ‘@angular/cdk/scrolling’ in Javascript
Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs
