# Function component is not a function declaration

> The error is caused by the "react/function-component-definition" React linting rule from the ESLint plugin.

**URL:** https://sentry.io/answers/error-function-component-is-not-a-function-declaration-eslint/

---

## The Problem

When you have a Next.js app with the [ESLint](https://eslint.org/) 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](https://github.com/jsx-eslint/eslint-plugin-react).  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:

```javascript
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`](https://nextjs.org/docs/pages/api-reference/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:

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

```javascript
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](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md), 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:

```json
{
  "scripts": {
    "lint": "next lint"
  }
}
```

Then run `npm run lint`:

```shell
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](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint). 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:

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

**Note:** ESLint 9+ uses a [flat config format](https://eslint.org/docs/latest/use/configure/configuration-files) (`eslint.config.mjs`) instead of `.eslintrc.json`. If you are using ESLint 9 or later, configure the rule in your `eslint.config.mjs` file using the flat config syntax. The `.eslintrc.json` examples above apply to ESLint 8 and earlier.

---

*Source: [sentry.io/answers/error-function-component-is-not-a-function-declaration-eslint/](https://sentry.io/answers/error-function-component-is-not-a-function-declaration-eslint/)*