When do importing user-defined components need curly braces?

Question

In the react docs , it writes like:

import React from 'react';
import CustomButton from './CustomButton';

But I must write like :

    import React from 'react';
    import {CustomButton} from './CustomButton';

Otherwise the console gives me some errors like :

Uncaught SyntaxError: Identifier 'ruleObj' has already been declared
    at <anonymous>:1:1

This is export/import syntax: without braces you import `default`, with braces you import named variables — RaphaMex, Jun 09 '18 at 03:26
That means you have a named export. You need a "named import" to import a named export. If you don't want that then make a default export: `export default MyComponents;`. This has nothing to do with React. The React documentation assumes you have a default export, because that's what people use when their module only exports a single value. — Felix Kling, Jun 09 '18 at 03:29
@FelixKling THS! I've just now learned some export/import syntax . — frontGirl, Jun 09 '18 at 03:40

score 1 · Accepted Answer · answered Jun 09 '18 at 03:26

1

That might be happening because the CustomButton is not exported as default in './CustomButton'.

When a module has a default you don't need {}. That is needed when you export multiple things, and you want to require some of them.

answered Jun 09 '18 at 03:26

Alan

1 Answers1