cannot export const arrow function

Question

new to ES6, I was trying to make a React simple functional component like this

// ./Todo.jsx

    export default const Todo = ({
      todos,
      onTodoClick,
    }) => (
      <ul>
        {todos.map( (todo, i) =>
          <li key     = {i} 
              onClick = {() => onTodoClick(i) } 
              style   = {{textDecoration: todo.completed ? 'line-through': 'none' }}
              >
            {todo.text}
          </li>
        )}
      </ul>
    )

But

// Another file 
import Todo from './Todos.jsx';
console.log(Todo) // undefined

did not yield the arrow function.

but if I leave off the "const todo =" part in the export link, like so

    export default ({
      todos,
      onTodoClick,
    }) => (...)

It gets successfully imported.

Why is that?

Possible duplicate of [ES6 export default AssignmentExpression](http://stackoverflow.com/questions/24925628/es6-export-default-assignmentexpression) — Bergi, Feb 03 '16 at 18:14

score 141 · Accepted Answer · edited Jan 08 '16 at 16:16

141

You're trying to export a default and declare a variable at the same time, which is invalid syntax.

Consider the following, since we know that you can declare multiple variables using only one instance of the keyword, var a, b, c; the export definition wouldn't make sense at all.

export default var a, b, c;

What would that mean? What would get exported?

Furthermore, using the export default syntax already creates a variable called default that needs to contain a value or reference.

Export the variable instead if you want to make it a constant.

const Todo = () => {};

export default Todo;

There is a thread about this on ESDiscuss

edited Jan 08 '16 at 16:16

loganfsmyth

156,129
30
331
251

answered Jan 08 '16 at 12:20

Henrik Andersson

45,354
16
98
92

I see, but export class Todo extends Component {...} is not considered as declaration of a variable but a class which is valid, is that correct? – Nik So Jan 08 '16 at 12:24
2

Yes, but using the `class` keyword is only syntactic sugar AND you cannot declare more than 1 class in the same go anyways. `class A, B, C` is in valid syntax. – Henrik Andersson Jan 08 '16 at 12:26
Thanks a million, it makes a lot of sense, the part about you can var/const multiple things and export wouldn't know which to act on. – Nik So Jan 08 '16 at 12:42
2

The spec also has [a useful table](http://www.ecma-international.org/ecma-262/6.0/#table-42) on the different types of allowed `export` – CodingIntrigue Jan 08 '16 at 13:17

score 7 · Answer 2 · answered Jun 27 '21 at 19:32

Give it a look
Arrow function export as a separate line:

import React from 'react';
const Body=()=>(
    <div>This is my body</div>
);
export default Body;

Here you can export it in the same line

import React from 'react';
export const Body=()=>(
    <div>This is my body</div>
);

The important thing is that you must import this arrow function by using below code

import {Body} form 'path';
 
/*use arrow function name inside the curly bracket only.*/

Hope this will help you to export your arrow function in the same line :)

cannot export const arrow function

2 Answers2

Linked