How to fix: Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Written by kyen99 in Errors

This common Javascript error, “Element type is invalid,” is usually caused by a mismatch between import and exports. You are trying to import the default export from a module that only exports named components, or vice versa.

The easiest way to resolve this error is to simply add (or remove) the curly braces from the left side of your import statement. Then, see if the issue goes away. If you created the imported module, you can also adjust the export.

Your import likely looks like one of these. Try changing it to the other one.

// Importing a default export as SomeComponent
import SomeComponent from '../libs/utils.js'

// Importing the named export SomeComponent
import { SomeComponent } from '../libs/utils.js'Code language: JavaScript (javascript)

Matching ES6/Typescript Import and Export

There are multiple ways to import and export Javascript modules. The import must match the export or else errors like this can occur. ES6 allows a single default export and multiple named exports. A file can use one or both of these methods to export reusable components.

Here are some examples of how to match them properly.

// myLibrary.js
const addOne = num => num + 1 // not exported

export const addTwo = num => num + 2 // named export "addTwo"
const double = num => num + num // not exported (here)

export default double // export function "double" as the default export

// otherFile.js
// these are ok
import { addTwo } from './myLibrary' // import named export "addTwo"
import { addTwo as doIt } from './myLibrary' // import named export "addTwo" as "doIt"
import double from './myLibrary' // import default export as "double"
import DoubleIt from './myLibrary' // import default export as "DoubleIt"
import double, { addTwo } from './myLibrary' // import everything!

// these are NOT ok
import addTwo from './myLibrary' // This won't error but will import double and name it addTwo
import { double } from './myLibrary' // Double will be undefined because there is no named export called "double"Code language: JavaScript (javascript)

CommonJS modules

CommonJS format uses module.exports and require to import and export Javascript modules. The exports are similar but there is no default export. Instead you can import individual named exports or all exports as a single object.

// myLibrary.js
const addOne = num => num + 1 // this is not exported below
const addTwo = num => num + 2 
const double = num => num + num 
module.exports = {
  addTwo, // named export "addTwo"
  double  // named export "double"
}

// otherFile.js
// these are ok
const { addTwo } = require('./myLibrary') // import named export "addTwo"
const { addTwo: doIt } = require('./myLibrary') // import named export "addTwo" as "doIt"
const myLib = require('./myLibrary') // myLib.addTwo and myLib.double will exist
const { double: DoubleIt } = require('./myLibrary') // import double as "DoubleIt"
const { double, addTwo } = require('./myLibrary') // import everything!

// these are NOT ok
const addTwo = require('./myLibrary') // This won't error but will import entire export object as addTwo
Code language: JavaScript (javascript)

Additional Resources

Recent Posts