… 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.