Compilation error: Arrow functions must be exported as module default before assigning them to variables-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

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

P粉760675452 2023-08-30 13:05:14

427

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 (  {TaskList.description} 
 ); }

TaskList.js

import React from 'react'; import Task from './Task.js' export default ({ tasks }) => { return (  {tasks.map(task => (   
 ))} 
 ); }

I just started learning React and JavaScript.

P粉760675452

reply all (1)

P粉4208682942023-08-31 11:11:27 1 floor

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 theimport/no-anonymous-default-exportrule, 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 recommendnot todo 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.