Prettier/ESLint incorrectly corrects Next.js

I'm building an app with Next.js 13 using the app router, but I am encountering an error with formatting. Here is the code snippet:

However, after saving the file with Prettier/ESLint, the formatting becomes incorrect:

The issue lies with Prettier/ESLint incorrectly formatting the 'useClient' part.

My .prettierc file:

{
    "editorconfig": true,
    "semi": false,
    "trailingComma": "es5",
    "singleQuote": true,
    "arrowParens": "always"
}

My .editorconfig file:

root = true

[*]
indent_style = tab
indent_size = 3
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = false

My eslintrc:

{
    "extends": ["next/core-web-vitals", "prettier"]
}

My package.json:

{
    "name": "tv-calendar",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "dependencies": {
        "@prisma/client": "4.15.0",
        "@types/bcrypt": "^5.0.0",
        "axios": "^1.4.0",
        "bcrypt": "^5.1.0",
        "jsonwebtoken": "^9.0.0",
        "next": "13.4.4",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "zod": "^3.21.4"
    },
    "devDependencies": {
        "@types/jsonwebtoken": "^9.0.2",
        "@types/node": "20.2.5",
        "@types/react": "18.2.9",
        "@types/react-dom": "18.2.4",
        "autoprefixer": "10.4.14",
        "eslint": "8.42.0",
        "eslint-config-next": "13.4.4",
        "eslint-config-prettier": "^8.8.0",
        "postcss": "8.4.24",
        "prisma": "^4.15.0",
        "tailwindcss": "3.3.2",
        "typescript": "5.1.3"
    }
}

I made some modifications to the .prettierc file, such as removing the "arrowParens" configuration, but unfortunately, it did not produce the desired effect.

Solution

Just move the 'use client' to the top of your file. By doing this, you can ensure that the formatting issue caused by Prettier/ESLint is resolved.