… you might have mixed up default and named imports

In a Next.js React web application we can export functionality two ways:

  • As a function definition
    export function InsertDataTest(props) {
  • As an arrow function
    const SelectDataTest = () => {
    export default SelectDataTest;

The two definitions have to be imported with two different syntaxes

  • Use the named import for function definitions
    import { InsertDataTest } from './_insertDataTest';
  • Use the default import for arrow functions
    import SelectDataTest from './_selectDataTest';

If we try to use the wrong import statement, we get the following error message: 

Unhandled Runtime Error
Error: 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.

Check the render method of `Index`.

Make sure your import statement matches the definition format.

Leave a comment

Your email address will not be published. Required fields are marked *