Two export declarations in react component

Question

I've created a component using the following structure.

class Chip extends React.Component {
    //Some Code
}
export default Chip;

And when I run the component I get the following error.

Uncaught 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. Check the render method of `App`.
    at invariant (webpack-internal:///1:42)
    at instantiateReactComponent (webpack-internal:///79:72)
    at instantiateChild (webpack-internal:///147:42)
    at eval (webpack-internal:///147:69)
    at traverseAllChildrenImpl (webpack-internal:///83:75)
    at traverseAllChildrenImpl (webpack-internal:///83:91)
    at traverseAllChildren (webpack-internal:///83:170)
    at Object.instantiateChildren (webpack-internal:///147:68)
    at ReactDOMComponent._reconcilerInstantiateChildren (webpack-internal:///146:183)
    at ReactDOMComponent.mountChildren (webpack-internal:///146:222)

But when I change the class into the following, it works.

export class Chip extends React.Component {
    //Some Code
}
export default Chip;

What am I doing wrong here?

Make sure you are importing it something like this way `import Chip from './Chip` — Prakash Sharma, Nov 30 '17 at 13:24
From the difference in two files , I guess you are doing `import {Chip} from './Chip'` — Sai Ram, Nov 30 '17 at 13:30

score 0 · Accepted Answer · answered Nov 30 '17 at 13:56

If you do

export default Chip;

you must import it like so:

import Chip from "./Chip";

If you do

export { Chip, helperA, helperB };

or

export class Chip // etc..
export const helperA // yada yada yada

you must import it like so:

import { Chip, helperA, helperB } from "./Chip";

If export class works then you must be importing it like the second option I gave you.

Change it to the first option and it will work.

Two export declarations in react component

1 Answers1