Why does my React Component Export not work?

Question

I was just getting into react and trying it out for myself. After hours of configuring webpack just to get a hello world on my screen I thought I could get going now but after trying to render another component from a file the next problem.

My main file is app.js, which renders everything:

import React from 'react';
import ReactDOM from 'react-dom';
import {Hello} from './hello';

ReactDOM.render(
   <Hello/>,
   document.getElementById('app')
);

The Hello component comes from my hello.js in the same folder:

import React from 'react';

class Hello extends React.Component{
   render(){
       return (
           <h1>Hello, world!</h1>
       )
    }
}

export default Hello;

It was rendering fine when I was doing everything just in app.js without the import/export. It also compiles fine. But there are a lot of errors now in the console. So what am I missing?

Thanks

Gerd

Your Hello component is using `export default` so you'll want to remove the braces - `import Hello from './hello';` — ajmajmajma, Dec 03 '17 at 14:39
There's a bug as well when it just stops working even it was working perfectly and even when you can open the exported function by ctrl+clicking the variable. — Lalit Fauzdar, Jul 14 '21 at 11:05

Andy · Accepted Answer · 2017-12-03T14:47:13.190

100

Because your export is default you don't need braces around your import component name:

import Hello from './hello';

Here's a verbose technical article from Axel Rauschmayer on the final ES6 modules syntax that you might find useful.

And here's a slightly less techy post about the same topic.

edited Dec 03 '17 at 14:47

answered Dec 03 '17 at 14:36

Andy

61,948
13
68
95

2

thanks a lot for not only getting a rookie up and running but also making him understand what the actual difference is. – gerdtf Dec 03 '17 at 14:54
"you don't need braces" should really be "you can't use braces". Export default must be imported without braces; you can export-deault only one thing per module. Export regular must be imported with braces, where you list all the exports from the module, by name. You CAN export a name regularly, and then also default. Then you can import it either way. – OsamaBinLogin Jun 21 '23 at 04:40

mina sameh · Answer 2 · 2017-12-03T16:38:03.213

17

when you import the default class you use

import ClassName from 'something';

and when you import other classes you use

import {ClassName} from 'something';

an example:

in hello.js file

import React from 'react';

class Hello extends React.Component{
   render(){
       return (
           <h1>Hello, world!</h1>
       )
    }
}

class Other extends React.Component{
   render(){
       return (
           <h1>Hello, world!</h1>
       )
    }
}
export default Hello;
export Other;

in other file

import Hello, {Other} from './hello';

tip: you could also import the default class with other name

import Component, {Other} from './hello';

edited Dec 03 '17 at 16:38

answered Dec 03 '17 at 14:43

mina sameh

1,069
7
20

This is an excellent example however the Other component would also need it's own export statement. – Jenna Rajani Dec 03 '17 at 16:18
When you export default, you export a value, not anything with a name. Actually, it has a name, 'default'. So, you import from hello.mjs, and all exports are on the variable 'default', and when you say 'import Hello from hello.mjs', you give it a name, like Hello = default; If you export non-default, say 'export function Gbye...', you're really exporting default.Gbye . That has a name, 'Gbye', that is required, in order to find it on the variable 'default', among other things exported non-default. So, import {a, Gbye, c} from hello.mjs is like 'const {a, Gbye, c} = default; Sortof. – OsamaBinLogin Jun 21 '23 at 04:01

Why does my React Component Export not work?

2 Answers2

Linked