Unexpected default export of anonymous function

The warning “Unexpected default export of anonymous function import/no-anonymous-default-export” happens when you try to export an anonymous function as export default. To solve this warning give a name for the function before exporting. You can also remove this warning by making import/no-anonymous-default-export off in ESLint rules.

In javascript, an anonymous function is a function without a name. These are commonly used as callback functions that can be passed as arguments to another function. 

Here is an example showing how the error occurs.

 export default function(){
    return (<>
        <p>My Component</p>
    </>)
 }

The above code will throw a warning because we have not provided the function name.

Give a name for the function to be export

To solve this error, give a name for the function before export default as below.

 export default function MyComponent(){
    return (<>
        <p>My Component</p>
    </>)
 }

If you are exporting an arrow function, then you have to declare it first and then export default as below.

const MyComponent = () => {
    return (<>
        <p>My Component</p>
    </>)
}

export default MyComponent;

You can have only one default export per file. When you import you can specify a name that is completely independent of the name in exported file.

You can import and use it in any other component as below.

import MyComponent from "./MyComponent";

function App() {	
	return (
	  	<div>
			<MyComponent></MyComponent>
	  	</div>
	);
};
export default App;

Disable ESLint rule for import/no-anonymous-default-export

Another solution to avoid this warning is disabling the ESLint rule for import/no-anonymous-default-export. To disable add eslint-disable-next-line import/no-anonymous-default-export as a comment just top of the export default of the anonymous function as given below.

// eslint-disable-next-line import/no-anonymous-default-export
export default function(){
    return (<>
        <p>My Component</p>
    </>)
}

You can disable rules in the config file like:

"rules": {
	"import/prefer-default-export": "off",
}

Due to its dynamic nature and loose typing, JavaScript is prone to developer error. Without running the code, linting tools like ESLint helps developers to find the issues with their JavaScript code. It analyses your JavaScript code for common problems such as syntax errors, formatting issues, unused imports, and potential bugs.

To disable a particular rule warning in a specific part of a code, you can use block comments in the following format:

/* eslint-disable */

example('foo');

/* eslint-enable */

The eslint-disable will disable ESLint rules and eslint-enable will enable the ESLint rules.

Conclusion

To solve the warning “Unexpected default export of anonymous function import/no-anonymous-default-export”, provide a name for the function before exporting the default or disable the ESLint rule by adding “eslint-disable-next-line import/no-anonymous-default-export” as a comment at the top of the export default.