How to import a function Component in React?

Question

I have a function component that want to import in my app, but I'm getting:

Invariant Violation 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 ProjectDropContainer.

Here is a sandbox:

https://codesandbox.io/s/brave-voice-bdrx0

I tried importing the ProjectDropContainer like this:

import ProjectDropContainer from "./ProjectDropContainer";

or like this:

import {ProjectDropContainer} from "./ProjectDropContainer";

But still the same!

The example that I tried to do according to (and it's working) is:

https://codesandbox.io/s/github/emyarod/carbon/tree/dnd-uploader-codesandbox/packages/react/examples/drag-and-drop-file-uploader

Answer 1

you should export default your ProjectDropContainer component :

export default ProjectDropContainer

and then import it like this:

import ProjectDropContainer from "./ProjectDropContainer";

Answer 2

The problem seems to be that you are importing an undefined FileUploaderDropContainer from "carbon-components-react" and using it in your ProjectDropContainer component. Your other import works fine. Check the doc for "carbon-components-react" to see if the FileUploaderDropContainer exists, its name is rightly spelled and if it is not in some subdirectory of the main module.