Uncaught Error: Element type is invalid: expected a string (for built-in components)

Question

I am getting this error. I have defined all components in index.js and I am using react-dom.

Webpacker itself is compiling with no err

Answer 1

This error is most likely caused because of your import statement. First this is weird import { App } from './components/CustomerSearch'; because here what i expect is that you have a file named CustomSearch.js but from your question it's AppComponent.js so i suggest you change it like this

import App from './components/AppComponent';

//here the name App doesn't matter as long as you're making a default export which you're doing.

Answer 2

I'm interpreting the error as saying that maybe you forgot to export your Grid (or maybe your App) component. Is that something you have checked? (In the two files where those components are defined).

And as abdul said, it's possible the import is in the wrong format. It depends on whether you have exported the components by export or export default.

For components (or functions, constants etc) that are exported using just export you need to import it with the syntax of import {ComponentName} from .... Else, if they are exported by export default, then they are imported without the curly braces (import ComponentName from ..).