Unhandled Runtime Error when uploading images on next JS project. got this error Check the render method of `FileUpload`

Question

When uploading images on NextJS project, got this error:

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

Call Stack createFiberFromTypeAndProps (app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (27799:0) createFiberFromElement (app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (27828:0) reconcileSingleElement (app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (9786:0) reconcileChildFibersImpl (app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (9845:0) reconcileChildFibers (app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (9912:0) reconcileChildren (app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (15627:0) mountIndeterminateComponent (app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (16851:0) beginWork$1 (app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (18382:0) beginWork (app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (26791:0) performUnitOfWork (app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25637:0) workLoopSync (app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25353:0) renderRootSync (app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25308:0) recoverFromConcurrentError (app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24525:0) performSyncWorkOnRoot (app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24789:0) flushSyncWorkAcrossRoots_impl (app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (10286:0) flushSyncWorkOnAllRoots (app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (10246:0) processRootScheduleInMicrotask (app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (10391:0) eval (app-pages-browser)\node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (10562:0)

How to solve this error in NextJS code?

Answer 1

Without seeing your code it's impossible to say for sure, but that error almost always means that you imported something incorrectly. Check your imports, and for all of the imports that are coming from your code and not from a node_module, go into that file and make sure that you actually exported what you're trying to import. This is one of the few errors that is actually really consistent and accurate with pointing you to the right problem.

Also, remember that if you export something like this:

export const x = ...

you import it like this:

import {x} from ".."

but if you export it like:

const x = ...

export default x

you import it like:

import x from ".."