Sentry Answers>Next.js>

ESLint error in Next.js app: Function component is not a function declaration

ESLint error in Next.js app: Function component is not a function declaration

Matthew C.

The ProblemJump To Solution

When you have a Next.js app with the ESLint dependency for finding and fixing problems in your JavaScript code, you may get the following error:

Click to Copy
Function component is not a function declaration eslint(react/function-component-definition)

The Solution

The error is caused by the ”react/function-component-definition” React linting rule from the ESLint plugin. By default, the rule enforces a "function-declaration" function type for function components.

Solve the error by making your named function expression React components use a function declaration as expected by ESLint:

Click to Copy
function MyComponent() { return <div>Text</div>; } export default MyComponent;

ESLint is set up for your project when you use the Next.js create-next-app CLI tool, which is the easiest way to get started with Next.js. The default ESLint configuration for Next.js uses the eslint-config-next plugin that uses the eslint-plugin-react rule set.

You get an ESLint error because of the following rule options for the "react/function-component-definition" rule in the .eslintrc.json file:

Click to Copy
{ "extends": "next/core-web-vitals", "rules": { "react/function-component-definition": [ 2, { "namedComponents": "function-declaration", "unnamedComponents": "arrow-function" } ] } }

If you have a named React component that does not use a function declaration, such as the following component that uses a named function expression, you’ll get an error:

Click to Copy
const MyComponent = function () { return <div>Text</div>; }; export default MyComponent;

If you want to adjust this rule, change the configuration of the "react/function-component-definition" rule in the .eslintrc.json file.

The first value in the rule array defines its error level and can be one of these values:

  • "off" or 0: turn the rule off.
  • "warn" or 1: turn the rule on as a warning.
  • "error" or 2: turn the rule on as an error.

The "namedComponents" property can have the following values: "function-declaration", "function-expression", "arrow-function", or consist of an array with a combination of these values. The "unnamedComponents" property can have the same values as the "namedComponents" property, but "function-declaration" is not a possible value.

You can read more about the "react/function-component-definition" rule in the ESLint plugin docs, which includes patterns that can’t be fixed in JavaScript and auto fixed in TypeScript.

To fix all ESLint errors using your terminal, add next lint as a script to your package.json file if it’s not already there:

Click to Copy
{ "scripts": { "lint": "next lint" } }

Then run npm run lint:

Click to Copy
npm run lint

If you don’t already have ESLint configured in your application, you’ll be guided through the installation and configuration process.

Another solution is to configure your IDE to auto-fix ESLint errors on save. If you use VS Code, install the ESLint VS Code extension. Open the settings editor from the command palette by pressing Ctrl + Shift + P and search for and select “Preferences: Open User Settings (JSON)“. In the settings.json file, add the following property:

Click to Copy
// tell the ESLint plugin to run on save "editor.codeActionsOnSave": { "source.fixAll": "explicit" },
  • Community SeriesDebug Next.js with Sentry
  • ResourcesJavaScript Frontend Error Monitoring 101
  • ResourcesSentry vs. Crashlytics: The Mobile Developer's Decision-Making Guide
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.