Eslint error "Parsing error: Unexpected token =" Because state is not inside the constructor

Question

Maybe this is a stupid question. But can anyone give me a solution? We can write state outside of constructor, right? Then why eslint is giving me this error?

If I make initialize the state inside the constructor there is no error.

Do I need to install babel with eslint? Can anyone give a clear guide line how to properly use eslint with prettier.

This is my Code:


export default class ClickCounter extends Component {
    state= { count: 1 };
    
    incrementCount() {
        this.setState((prev) => ({
            count: prev.count + 1,
        }));
    }

    render() {
        const { count } = this.state;
        return (
            <div>
                <button type="button" onClick={this.incrementCount}>
                    Clicked {count}times.
                </button>
            </div>
        );
    }
}

Screenshot of code and error

This is my .eslintrc.json :

    "extends": [
        "airbnb",
        "airbnb/hooks",
        "eslint:recommended",
        "prettier",
        "plugin:jsx-a11y/recommended"
    ],
    "env": {
        "browser": true,
        "node": true,
        "es2021": true,
        "jest": true
    },
    "rules": {
        "react/react-in-jsx-scope": 0,
        "react-hooks/rules-of-hooks": "error",
        "no-console": 0,
        "react/state-in-constructor": 0,
        "indent": 0,
        "linebreak-style": 0,
        "react/prop-types": 0,
        "jsx-a11y/click-events-have-key-events": 0,
        "prettier/prettier": [
            "error",
            {
                "trailingComma": "es5",
                "singleQuote": true,
                "printWidth": 100,
                "tabWidth": 4,
                "semi": true,
                "endOfLine": "auto"
            }
        ]
    },
    "plugins": ["prettier", "react", "react-hooks"]
}

And this is package.json:

{
    "name": "demo",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "eslint": "^8.24.0",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-jsx-a11y": "^6.6.1",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-plugin-react": "^7.31.8",
        "eslint-plugin-react-hooks": "^4.6.0",
        "prettier": "2.7.1"
    }
}

Thank you so much for you time.

score 0 · Answer 1 · answered Oct 05 '22 at 11:41

I found a solution at This Link. I installed

npm i -D @babel/eslint-parser @babel/preset-react

and also added

  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaVersion": 8,
    "requireConfigFile": false,
    "babelOptions": {
        presets: ["@babel/preset-react"]
     }
  }

to the .eslintrc.* file. Hope this helps anyone.

Eslint error "Parsing error: Unexpected token =" Because state is not inside the constructor

1 Answers1