How to import a function Component in React?

user_7236133 0
Viewed 16718

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

reactjs
2 Answers

you should export default your ProjectDropContainer component :

export default ProjectDropContainer

and then import it like this:

import ProjectDropContainer from "./ProjectDropContainer";
user_91808730

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.

user_82186520
Related