当前位置: 博客 /  ReactJs  / Element Type Is Invalid Expected a string...

Element Type Is Invalid Expected a string...

This error occurred when I ran a React project:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Here is the screenshot:

Element type is invalid

My solution steps:

1. Identify the problem

To identify the probable error from the console in the browser and try to find the message: Check your code at line XXX.

2. Check the brackets {}

You need to check the brackets {} when importing a package or component.

Whether the import gets brackets {} before it, depends on the way export is used, such as import {Provider} from 'react-redux';,if we use import Provider from 'react-redux';,it’s wrong.

The wrong use of braces {} led to this error.

  1. If import package from npm, go directly to npm or GitHub to see samples.

  2. When import a self-defined component, if the component uses ‘export default XXX’, then import it without brackets {}

3. Check the version of import’s npm package

If all the braces {} are imported correctly, it is possible that the package version of the installation is wrong, such as the syntax is incompatible after the package is updated.

  1. If you know the correct version, you can rollback the version or update it, change the version number in ‘package. json’, and install it again with npm install.

  2. Check the documentation on the npm or GitHub, find the corresponding use documentation of the version you are currently installing, then update the statement you used in the project.

- END -