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

Matthew C.

—May 15, 2024

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:

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:

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:

{
  "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:

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:

{
  "scripts": {
    "lint": "next lint"
  }
}

Then run npm run lint:

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:

  // tell the ESLint plugin to run on save
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },