CODEWITHSUNDEEP
javascriptreactjs
user3256451
user3256451

Reputation: 475

Export declaration or expression expected in React components. Difference between Export method

I having a react component. code as below

import React from 'react';
export const Header=()=>{

        return(
            <div>this test</div>
        );
}

This work properly fine.

However if i use below code it gives me error, Export declaration or expression expected.

import React from 'react';
const Header=()=>{

        return(
            <div>this test</div>
        );
 }

export  Header;

Can some one explain the differences between these two export. Thanks, in advance.

Upvotes: 1

Views: 2179

Answers (2)

Oliver Rydzi
Oliver Rydzi

Reputation: 334

You can use 

export default Header

to make second one work. Then, you can import it from another file by 

import Header from './Header'

or even 

import InsertAnythingHere from './Header'

given that relative path of file is ./Header.js.

Upvotes: 0

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

If you want named export you need

export  { Header };

or

export  { Header as Smth };

Docs

export { name1, name2, …, nameN };

export { variable1 as name1, variable2 as name2, …, nameN };

export let name1, name2, …, nameN; // also var, function

export let name1 = …, name2 = …, …, nameN; // also var, const

export name is just invalid syntax.

Upvotes: 2

Related Questions