@babel/eslint-parser nie rozpoznaje składni jsx

Question

Realizując jeden z popularnych kursów poświęconych Reactowi napotkałem problem, który próbuję rozwiązać od kilku dni, choć to pewnie kwestia mojego braku doświadczenia niż stopnia złożoności problemu 

Aplikacja budowana jest na ustawieniach create-react-app, z eslintem dodatkowo konfigurowanym w pliku .eslintrc. Kurs zaleca instalację babel-eslinta w celu uniknięcia błędów przy używaniu klas js wewnątrz komponentów  - i tu pojawia się problem. Babel-eslint jest przestarzały, na jego miejsce wszedł @babel/eslint-parser. Po jego zainstalowaniu pojawia się błąd informujący, że bez dodatkowych pluginów parser nie zinterpretuje poprawnie "eksperymentalnych składni" (i podkreśla składnię jsx). W związku z powyższym zainstalowałem dodatkowo "@babel/eslint-plugin" i "@babel/plugin-syntax-jsx". Kiedy wpisałem je na listę pluginów w pliku .eslintrc eslint przestal  wyrzucać błędy, ale podczas budowania aplikacji pojawia się komunikat: 

Próbowałem, jak radzi większość komentujących na forach, zrobić reinstalkę npm ale nie pomaga, w związku z czym będę bardzo wdzięczny za pomoc.

Oto pliki package.json i .eslintrc:

{
  "name": "react-intermediate",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.14.3",
    "@babel/eslint-parser": "^7.14.3",
    "@babel/eslint-plugin": "^7.13.16",
    "@babel/plugin-transform-react-jsx": "^7.14.3",
    "@storybook/addon-knobs": "^6.2.9",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.0",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prepare": "husky install",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-syntax-jsx": "^7.12.13",
    "@storybook/addon-actions": "^6.2.9",
    "@storybook/addon-essentials": "^6.2.9",
    "@storybook/addon-links": "^6.2.9",
    "@storybook/node-logger": "^6.2.9",
    "@storybook/preset-create-react-app": "^3.1.7",
    "@storybook/react": "^6.2.9",
    "eslint": "^7.26.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-webpack": "^0.13.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^1.7.0",
    "husky": "^6.0.0",
    "lint-staged": "^10.5.4",
    "prettier": "^2.3.0",
    "storybook-react-router": "^1.0.8"
  },
  "lint-staged": {
    "*.js": [
      "prettier --.prettierrc --write",
      "eslint --fix"
    ]
  },
  "eslintConfig": {
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  }
}

{
  "extends": ["airbnb", "prettier", "plugin:import/errors", "plugin:import/warnings"],
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "requireConfigFile": false
  },
  "plugins": ["@babel", "@babel/plugin-syntax-jsx"],

  "env": {
    "jest": true
  },
  "globals": {
    "document": true
  },
  "settings": {
    "import/resolver": {
      "node": {
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  },
  "rules": {
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js"]
      }
    ],
    "react/jsx-props-no-spreading": "off",
    "import/prefer-default-export": "off",
    "react/no-unescaped-entities": 0,
    "import/no-extraneous-dependencies": [
      "error",
      { "devDependencies": true, "optionalDependencies": false, "peerDependencies": false }
    ]
  }
}

 

Answer 1

Bo próbujesz załączyć to jako plugin do ESLinta, a powinieneś jako plugin do Babela. Zgodnie z dokumentacją powinieneś je załączyć w konfiguracji Babela, którą umieszcza się w parserOptions.babelOptions, czyli coś typu:

"parserOptions": {
	"babelOptions": {
		"plugins": [
			[ "@babel/plugin-syntax-jsx" ]
		]
	}
}

 

Comments

Dzięki wielkie, przestało sypać błędami odnośnie jsx. Nadal jednak przy próbie utworzenia klasy w komponencie pojawia się komunikat

State initialization should be in a constructor

czyli problem jsx jak najbardziej rozwiązany, natomiast zastanawia mnie czemu eslint nie przyjmuje zapisu klasy bez konstruktora, skoro chyba własnie po to potrzebny był ten parser...

---

Ten parser był potrzebny do obsługi składni JSX. Ten błąd z kolei jest związany z regułą z pluginu dla Reacta. Ta reguła jest włączona w używanym przez Ciebie styleguide airbnb. Musisz ją po paru nadpisać w swoich rules.