Compilation error: Arrow functions must be exported as module default before assigning them to variables

Question

The following error occurred while compiling:

A warning occurred during compilation.

src/Task.js

Line 4, first character: assign the arrow function to a variable and then export it as the module default value import/no-anonymous-default-export

;

src/TaskList.js

Line 4, first character: assign the arrow function to a variable and then export it as the module default value import/no-anonymous-default-export

;

The following is my JS file:

Task.js

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

export default ({Task}) => {
    return (
        <p>
            {TaskList.description}
        </p>
    );
}

TaskList.js

import React from 'react';
import Task from './Task.js'

export default ({ tasks }) => {
    return (
        <ul className="list-group">
            {tasks.map(task => (
                <li key={task.id} className ="list-group-item">
                    <Task task={task} />
                </li>
            ))}
      </ul>
    );
}

I just started learning React and JavaScript.

Answer 1

For arrow functions, since they are anonymous, you need to assign it to a variable and then export it. Based on your code, this example should work (but don't forget to fill in the logic in the tasks.map function)

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

const Tasks = ({ tasks }) => {
  return tasks.map(task => ( ... ));
} 

export default Tasks;

This is caused by the import/no-anonymous-default-export rule, which prevents a module's default export from being unnamed.

Since this is just a lint warning and not a syntax error, your existing code will work if you disable the rule (but I recommend not to do this!).

This rule is useful because ensuring that default exports are named helps improve the searchability of the code base by encouraging reuse of the same identifier at declaration locations and import locations.