Unexpected token when linting shorthand react fragments <></> (eslint/babel) - node.js

I am currently upgrading some very old ESLint and Babel packages and ESLint has started complaining about my shorthand React Fragments and I'm not sure why?
When using <React.Fragment> I get an error saying it prefers shorthand (Which is what I want) and can quickfix into shorthand fragments <>. But then I still receive the below error.
I think I may have some missing config, or dependency, or maybe something is just not be set up correctly?
It's probably also worth mentioning that my code compiles correctly and still works even with the linting error.
The ESLint Error:
Parsing error: Unexpected token
52 | return (
53 | <div>
> 54 | <>React shorthand fragment doesn't seem to work</>
| ^
55 | <Rest of code/>
56 | </div>
57 | );eslint
My Babel/ESLint Packages:
"#babel/cli": "7.11.6",
"#babel/core": "7.11.6",
"#babel/node": "7.10.5",
"#babel/plugin-proposal-class-properties": "7.10.4",
"#babel/plugin-proposal-export-default-from": "7.10.4",
"#babel/plugin-transform-react-jsx": "7.10.4",
"#babel/preset-env": "7.11.5",
"#babel/preset-react": "7.10.4",
"#babel/runtime": "7.11.2",
"babel-eslint": "8.2.6",
"babel-jest": "20.0.3",
"babel-loader": "8.1.0",
"babel-plugin-transform-react-constant-elements": "6.23.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.6",
"babel-polyfill": "6.23.0",
"babel-preset-env": "1.6.0",
"babel-preset-stage-1": "6.24.1",
"eslint": "7.10.0",
"eslint-config-airbnb": "18.2.0",
"eslint-config-prettier": "2.10.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsx-a11y": "6.3.1",
"eslint-plugin-react": "7.21.3",
"eslint-watch": "3.1.2",
My ESLint Config:
{
"env": {
"es6": true,
"browser": true,
"node": true,
"jquery": true,
"jest": true
},
"extends": ["plugin:react/recommended", "airbnb", "prettier", "prettier/react"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"indent": ["error", 4],
"semi": "error",
"arrow-body-style": 0,
"no-console": ["error", { "allow": ["warn", "error"] }],
"quotes": ["error", "single", { "avoidEscape": true }],
"no-multi-spaces": "error",
"react/jsx-indent": 0,
"react/jsx-indent-props": 0,
"react/jsx-filename-extension": 0
},
"globals": {}
}
My Babel Config:
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-export-default-from",
"#babel/plugin-transform-react-jsx"
]
}

Related

How can I get Prettier to Let Me Use Tabs

I'm using ESLint and Prettier with the AirBNB style guide.
For the life of me I can't get it to stop yelling at me on every single line of my file to use spaces.
.eslintrc.json
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["airbnb-base", "prettier", "plugin:node/recommended"],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error",
"indent": ["warn", "tab"],
"quotes": ["warn", "single"],
"no-unused-vars": "warn",
"no-console": "off",
"no-tabs": "off",
"no-restricted-syntax": "off",
"func-names": "off"
}
}
package.json dependencies
"devDependencies": {
"autoprefixer": "^10.1.0",
"clean-css-cli": "^4.3.0",
"concurrently": "^5.3.0",
"cross-env": "^7.0.3",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-plugin-import": "^2.23.4",
"live-server": "^1.2.1",
"postcss-cli": "^8.3.1",
"postcss-import": "^14.0.2",
"pwa-asset-generator": "^4.1.1",
"tailwindcss": "^2.0.2"
}
settings.json
{
"editor.linkedEditing": true,
"editor.detectIndentation": true,
"notebook.cellToolbarLocation": {
"default": "right",
"jupyter-notebook": "left"
},
"prettier.tabWidth": 4,
"prettier.useTabs": true,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.alwaysShowStatus": true,
"workbench.colorTheme": "Default Dark+",
"prettier.singleQuote": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
I have tabs set everywhere. This exact setup worked before (I had to factory reset my machine). I have my VS code settings synced, and the eslintrc and pacakge.json files should be the exact same as before...
Restarting VS code a second time worked...

ESLint: Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' (2:9)

I am trying to use ESLint in WebStrom, but it doesn't work and displays an error:
ESLint: Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' (2:9).
Here is my .eslintrc and package.json settings. What should I do for fixing the error?
package.json
{
"name": "raonair-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"eslint-config-react-app": "^6.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prepare": "husky install"
},
"parser": "babel-eslint",
"eslintConfig": {
"extends": [
"react-app",
"airbnb",
"plugin:flowtype/recommended"
],
"plugins": [
"flowtype"
]
},
"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/eslint-parser": "^7.15.0",
"#babel/eslint-plugin": "^7.14.5",
"#babel/plugin-syntax-jsx": "^7.14.5",
"eslint": "^7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-flowtype": "^5.9.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": "^7.0.1",
"prettier": "^2.3.2"
}
}
.eslintrc
{
"env": {
"browser": true,
"node": true
},
"extends": [
"airbnb",
"airbnb/hooks",
"prettier"
],
"parser": "#babel/eslint-parser",
"parserOptions": {
"sourceType": "module",
"allowImportExportEveryWhere": false,
"ecmaFeatures": {
"globalReturn": false,
"jsx": true
},
"ecmaVersion": 2020,
"babelOptions": {
"configFile": "./babel.config.js"
}
},
"plugins": [
"jsx-a11y",
"react-hooks",
"#babel/",
"flowtype",
"import"
],
"rules": {
"import/no-anonymous-default-export": "off",
"import/no-extraneous-dependencies": "off",
"import/order": [
"error",
{
"groups": [
"builtin",
"external",
"internal",
"parent",
"sibling"
],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"caseInsensitive": false
}
}
],
"import/prefer-default-export": "off",
"indent": [
"error",
2,
{
"SwitchCase": 1
}
],
"jsx-a11y/anchor-is-valid": "off",
"no-console": "error",
"no-unused-vars": "error",
"react/jsx-props-no-spreading": "off",
"react/react-in-jsx-scope": "off"
},
"settings": {
"import/resolver": {
"typescript": {}
},
"insert_final_newline": true
}
}
Install #babel/preset-react in dev dependencies.
Add this in .eslintrc file
...
"parser": "#babel/eslint-parser",
"parserOptions": {
...
"babelOptions": {
"presets": ["#babel/preset-react"]
},
}
...
Source: https://ffan0811.medium.com/error-debugging-this-experimental-syntax-requires-enabling-one-of-the-following-parser-plugin-s-22946599a0a4
To expand on Ceroy's answer (source):
Install dependencies needed to enable babel to properly parse jsx
yarn add #babel/preset-react -D
or
npm install --save-dev #babel/preset-react
Configure Babel
.babelrc file in the project root:
{
"presets": [
"#babel/preset-react"
]
}
Specify parser in .eslintrc.json (so your console and VSCode will use the same one) - full eslintrc shown here:
{
"parser": "#babel/eslint-parser",
"settings": {
"react": {
"version": "detect"
}
},
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"standard",
"plugin:react/jsx-runtime",
"plugin:testing-library/react",
"plugin:jest/all"
],
"parserOptions": {
"sourceType": "module"
},
"rules": {}
}
Note: .eslintrc.json can also be created via npm init #eslint/config or by using the ESLint extension in VSCode. The init will give you more options to choose from (such as TypeScript support)
Try it out in the console: npx eslint --fix .
Check VSCode (with the ESLint extension)
Bonus:
ESLint Plugin Settings for VSCode (autofix on save, Jest aware, babel parser etc. - in global VSCode settings.json):
...
"eslint.alwaysShowStatus": true,
"eslint.format.enable": true,
"eslint.lintTask.enable": true,
"eslint.options": {
"parser": "#babel/eslint-parser"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript"
]
...
Full package.json:
{
"name": "okta-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^12.1.0",
"#testing-library/user-event": "^13.2.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"web-vitals": "^2.1.0"
},
"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": {
"#babel/eslint-parser": "^7.15.7",
"#babel/preset-react": "^7.14.5",
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-jsx": "^0.1.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-react": "^7.26.0"
}
}
I went through this error. My problem was the version issue of eslint-config-standard.
So my solution is eslint-config-standard version downgrade 17.0.0 => 16.0.3
"eslint-config-standard": "^17.0.0" => "^16.0.3"

eslint-plugin-testing-library is not catching lint errors

I'm trying to add eslint-plugin-testing library to a project to catch common errors in our #testing-library/react tests. I've followed the instruction steps, yet I cannot get it to catch errors in the test files.
For example, I manually turn on the no-debug rule, add a debug() statement in a .test.tsx file, and run the linter. It does not catch any mistakes in the file.
If I break rules from other plugins, they are caught, so I suspect I may have something wrong in how I added the testing-library plugin to my config.
package.json
{
"dependencies": {
"react": "16.12.0",
"react-dom": "16.12.0"
},
"devDependencies": {
"#babel/core": "7.7.0",
"#babel/preset-react": "7.0.0",
"#babel/preset-typescript": "7.1.0",
"#testing-library/react": "9.1.3",
"#typescript-eslint/eslint-plugin": "2.15.0",
"#typescript-eslint/parser": "2.15.0",
"eslint": "6.8.0",
"eslint-plugin-cypress": "2.10.3",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.19.0",
"eslint-plugin-react-hooks": "2.3.0",
"eslint-plugin-testing-library": "3.0.0",
"typescript": "3.7.3"
}
}
.eslintrc
{
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"modules": true
}
},
"env": {
"browser": true,
"es6": true,
"jasmine": true,
"jest": true,
"jquery": true,
"node": true
},
"plugins": [
"#typescript-eslint",
"jsx-a11y",
"react-hooks",
"react",
"testing-library"
],
"extends": [
"eslint:recommended",
"plugin:jsx-a11y/recommended",
"plugin:react/recommended",
"plugin:testing-library/recommended"
],
"rules": {
"#typescript-eslint/no-unused-vars-experimental": "off",
"no-unused-vars": "off",
"react-hooks/exhaustive-deps": "warn",
"react-hooks/rules-of-hooks": "error",
"react/display-name": "off",
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"react/prop-types": "off",
"testing-library/no-await-sync-query": "error",
"testing-library/no-debug": "error"
},
"settings": {
"react": {
"version": "detect"
}
}
}
Couple of things I've seen in your setup:
you are using "plugin:testing-library/recommended" preset, but the best one for React is "plugin:testing-library/react" as it will enable recommended + react ones. That will enable all the rules with "React" badge under configuration columns
after you change this, you can remove both rules you manually added in your eslint config as they are automatically enabled by react preset
I'm not sure what you mean by "If I break rules from other plugins, they are caught". Let me know if enabling react preset fix this for you. If not, it would be nice to have a small repo to reproduce the error.

How to fix eslint configuration?

I have node.js project, and started with eslint configuration.
There is .eslintrc.json
{
"parser": "babel-eslint",
"extends": [
"airbnb",
"plugin:node/recommended",
"plugin:security/recommended",
"prettier",
],
"env": {
"node":true,
"commonjs": true,
"es6": true,
},
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"plugins": [
"prettier"
],
"rules": {
"prettier/prettier": "error",
"node/exports-style": ["error", "module.exports"],
"node/file-extension-in-import": ["error", "always"],
"node/prefer-global/buffer": ["error", "always"],
"node/prefer-global/console": ["error", "always"],
"node/prefer-global/process": ["error", "always"],
"node/prefer-global/url-search-params": ["error", "always"],
"node/prefer-global/url": ["error", "always"],
"node/prefer-promises/dns": "error",
"node/prefer-promises/fs": "error",
},
}
And package.json
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "server.js",
"license": "ISC",
"lint-staged": {
"*.{js,jsx}": [
"eslint --fix",
"git add"
],
"*.scss": [
"stylelint --fix",
"git add"
]
},
"scripts": {
"development": "nodemon",
"test": "echo \"Error: no test specified\" && exit 1",
"start": "babel-node server.js",
"eslint": "eslint config '**/*.js' --ext .js",
"prettier": "prettier '**/*.js' --write",
"stylelint": "stylelint '**/*.js'"
},
"author": "",
"dependencies": {
"#babel/polyfill": "^7.6.0",
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.4",
"cors": "^2.8.5",
"express": "^4.17.1",
"helmet": "^3.21.0",
"history": "^4.9.0",
"mongoose": "^5.6.13",
"nodemon": "^1.19.2"
},
"devDependencies": {
"#babel/cli": "^7.6.4",
"#babel/core": "^7.6.0",
"#babel/node": "^7.6.3",
"#babel/plugin-proposal-class-properties": "7.3.3",
"#babel/plugin-proposal-json-strings": "7.2.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-syntax-import-meta": "7.2.0",
"#babel/preset-env": "^7.3.1",
"#commitlint/cli": "^7.5.2",
"#commitlint/config-conventional": "^7.5.0",
"autoprefixer": "^9.4.7",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"babel-preset-env": "^1.7.0",
"cross-env": "^5.2.0",
"eslint": "^6.4.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.3.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-prettier": "^3.1.0",
"husky": "^1.3.1",
"lint-staged": "^8.1.4",
"prettier": "^1.18.2",
"rimraf": "^2.6.3",
"stylelint": "^10.1.0",
"stylelint-config-standard": "^18.3.0",
"stylelint-order": "^3.1.0"
}
}
When I try to write yarn run eslint from directory root I have an error :
$ yarn run eslint
yarn run v1.17.3
warning ../package.json: No license field
$ eslint config '**/*.js' --ext .js
Oops! Something went wrong! :(
ESLint: 6.4.0.
Failed to read JSON file at
/Users/vladyslavsymonenko/Chess/server/.eslintrc.json:
Cannot read config file: >/Users/vladyslavsymonenko/Chess/server/.eslintrc.json
Error: Unexpected token ] in JSON at position 1040
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about >this command.
I'm really confused with results, please help me )
You need to remove all trailing commas (like "prettier", on line 7) from your .eslintrc, since it is not valid JSON:
{
"parser": "babel-eslint",
"extends": [
"airbnb",
"plugin:node/recommended",
"plugin:security/recommended",
"prettier"
],
"env": {
"node": true,
"commonjs": true,
"es6": true
},
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"plugins": [
"prettier"
],
"rules": {
"prettier/prettier": "error",
"node/exports-style": ["error", "module.exports"],
"node/file-extension-in-import": ["error", "always"],
"node/prefer-global/buffer": ["error", "always"],
"node/prefer-global/console": ["error", "always"],
"node/prefer-global/process": ["error", "always"],
"node/prefer-global/url-search-params": ["error", "always"],
"node/prefer-global/url": ["error", "always"],
"node/prefer-promises/dns": "error",
"node/prefer-promises/fs": "error"
}
}

Unknown plugin "Relay" - React, GraphQL and Relay

I'm a beginner in GraphQL. I just started to follow the tutorial in Here But I'm getting this compilation problem:
Unknown plugin "Relay"
This is my package.json
{
"name": "hackernews-react-relay",
"version": "0.1.0",
"private": true,
"dependencies": {
"autoprefixer": "7.1.2",
"babel-core": "^6.5.2",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.1",
"babel-preset-react-app": "^3.0.2",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.4",
"dotenv": "4.0.0",
"eslint": "4.4.1",
"eslint-config-react-app": "^2.0.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.35.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.1.0",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "0.11.2",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.6",
"promise": "8.0.1",
"react": "^15.6.1",
"react-dev-utils": "^4.0.1",
"react-dom": "^15.6.1",
"react-relay": "^1.3.0",
"style-loader": "0.18.2",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.5.9",
"webpack": "3.5.1",
"webpack-dev-server": "2.7.1",
"webpack-manifest-plugin": "1.2.1",
"whatwg-fetch": "2.0.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"devDependencies": {
"babel-plugin-relay": "^1.3.0",
"relay-compiler": "^1.3.0"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.js?(x)",
"<rootDir>/src/**/?(*.)(spec|test).js?(x)"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
"babel": {
"presets": [
"react-app"
],
"plugins": [
"relay"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
I'm following step by step the tutorial mentioned above.
OS: Ubuntu 17.04
Node 8.0.0
npm 5.0.0
I've already trying to solve this problem by adding this to babel-presets
"es2015",
"stage-0",
"react"
and this to babel plugins
"babel-relay-plugin-loader"
But nothing works.
Instead of providing a relay option in your plugins definition, you can create a file called for example babelRelayPlugin.js and put the plugin definition there since the plugin needs to load the schema before used.
There you can import the getBabelRelayPlugin pass in the schema and export it back.
import getbabelRelayPlugin from 'babel-relay-plugin';
import schema from '../schema/schema.json';
export default getbabelRelayPlugin(schema.data);
Then use this file in your plugins definition instead.
"babel": {
"presets": [
"react-app"
],
"plugins": [
"./babelRelayPlugin"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
note: I am assuming that both the package.json and the babelRelayPlugin.js files live in the same directory

Resources