Errors Archives - Stack Fan

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' 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" 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 Additional Resources A simple explanation of import/export methods Typescript module documentation NodeJS module documentation