I used to struggle with remembering Imports and Exports and how to do them correctly. I always ended up with an error, and that’s why I made a cheat sheet.
But, why do we export/import? The import and export statements in JavaScript help you to share code across multiple files. And, everything that you can assign to a JavaScript variable can be imported or exported.
Not exporting or importing properly will result in this 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.
If you have it, you should check :
- That you did not forget to export your component.
- That you did import it properly.
- That your import path is correct. It happens to me that I used the vs code auto-import function, and the path was not correct.
- You are importing a component that does not exist. Let’s say for example you commented a component and the component is called on a page. But you forgot to comment its import.
#technology #programming #javascript #javascript-tips #es6-js
