Bug resolved: Invariant Violation: Element type is invalid: expected a string (for built-in components) or

Blogger Maotouhu () takes you to Go to New World?

Blog homepage:

  • Maotouhu’s blog
  • “Complete Column of Interview Questions” Articles with pictures and texts Vivid images Simple and easy to learn! Everyone is welcome to step in~
  • “IDEA Development Cheats Column” Learn the common operations of IDEA and double your work efficiency~
  • “Master Golang in 100 Days (Basic Introduction)” Learn the Golang language, play cloud native, and travel to large and small factories~

I hope this article can bring you some help The article is superficial, please criticize and correct me!

Article directory

  • “Bug resolved: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a problem”
    • **text**
      • 1. Bug reasons
      • 2. Solution
      • 3. How to avoid
    • **Summarize**
  • Original statement

《Bug resolved: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a problem》

Summary

The blogger of Maotouhu is here. The topic we are going to talk about today is a problem that big names in the front-end field may encounter. If you are a React developer, you may have encountered this error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a.... This is really a headache, but fortunately, the cat head tiger blogger has found a solution for everyone!

Introduction

In front-end development, we always encounter various bugs, but when you encounter an error like Invariant Violation: Element type is invalid, you may feel very confused. Why does such an error occur? This is usually due to React not recognizing the component you are trying to render. This article will detail the causes, solutions, and how to avoid this problem.

Text

1. Bug reasons

1.1 Component introduction issues

The most common reason is that an error occurred while introducing the component. For example:

import MyComponent from './MyComponent.js';

However, no components are exported by default in the MyComponent.js file.

1.2 Wrong component definition

This problem can also occur if your component is defined incorrectly. For example:

function MyComponent() {<!-- -->
  return;
}

export default MyComponent;

This component did not return any valid React elements.

2. Solution

2.1 Check component introduction

Make sure you import the component correctly and have the corresponding export in the component file.

// MyComponent.js
export default function MyComponent() {<!-- -->
  return <div>Hello World</div>;
}

2.2 Ensure components return valid React elements

like:

function MyComponent() {<!-- -->
  return <div>Hello World</div>;
}

3. How to avoid

3.1 Use type checking

Use TypeScript or PropTypes to add type checking to your React components.

3.2 Writing tests

Write unit and integration tests for your React components.

3.3 Code Review

Conduct regular code reviews to ensure everyone on the team is following best practices.

Summary

This Invariant Violation: Element type is invalid error may confuse many React developers, but the problem is easy to solve as long as you know the key points to look for. I hope this article can help you. If you have any questions or suggestions, please tell the cat head tiger blogger in the comment area!

References

  • React official documentation
  • StackOverflow related questions and answers

Catouhu blogger solves bugs in the front-end field and brings the most practical technology sharing!

Maotouhu recommends a list of necessary technology stacks for programmers:

Front-end technology Frontend:

  1. Basic Technology:

    • HTML5
    • CSS3 (and preprocessors such as Sass, Less)
    • JavaScript (ES6+)

  2. Front-end frameworks and libraries:

    • React
    • ? Angular
    • ?Vue.js
    • Svelte

  3. Status Management:

    • Redux (usually used with React)
    • MobX
    • ? NgRx (for Angular)
    • ?Vuex (for Vue)

  4. Tools and Build Systems:

    • ?Webpack
    • Rollup
    • Parcel
    • Babel (for JavaScript transpilation)

  5. Package Manager:

    • npm
    • Yarn

  6. Route management:

    • React-Router (for React)
    • ? Angular Router
    • ?Vue Router

  7. API and Communications:

    • Fetch API
    • Axios
    • GraphQL (and related clients like Apollo and Relay)

  8. Style and Component Library:

    • Styled Components
    • Ant Design
    • Bootstrap
    • ?Material-UI

  9. Test Tools:

    • Jest
    • Mocha
    • Cypress (for end-to-end testing)
    • Enzyme, Testing Library

  10. Version Control:

  • Git (and GitHub, GitLab, Bitbucket)
  1. Code Formatting and Quality Check:
  • ? ESLint
  • Prettier
  1. Performance Optimization and Monitoring:
  • ?Lighthouse
  • Web Vitals
  • Google Analytics
  1. Cross-platform mobile development:
  • React Native
  • ? Vue Native

Original statement

======= ·

  • Original author: Maotouhu
  • Edit: Libin9iOak

Author wx: [libin9iOak]
Public account: Maotouhu technical team

Study Review
? ?

This article is an original article and the copyright belongs to the author. Reprinting, duplication or quotation without permission is prohibited.

The author guarantees the authenticity and reliability of the information,but does not assume responsibility for its accuracy or completeness.

Commercial use without permission is prohibited.

If you have questions or suggestions, please contact the author.

Thank you for your support and respect.

Click on the business card below to join the IT technology core learning team. Explore the future of technology together and grow together.