Resolve eslint(node/no-unsupported-features/es-syntax) - How to support JavaScript modules in ESLint?

Question

I'm writing a game in JavaScript/ Redux. I'm unable to configure my .eslintrc.json file so that it supports the latest JavaScript syntax - I get a message saying

"Import and export declarations are not supported yet" eslint(node/no-unsupported-features/es-syntax).

I've read the official configuration docs for ESLint and tried (I thought all) combinations over the past few hours (changing environments, ecmaVersions, parsers and parser options).

The latest thing I've tried is to install a babel-eslint parser and so at the moment my .eslintrc.json looks like this:

{
  "extends": ["airbnb-base", "prettier", "plugin:node/recommended"],
  "plugins": ["prettier"],
  "env": {
    "es2020": true
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "rules": {
    "prettier/prettier": "error"
  }
}

And my package.json:

{
  "name": "astroman-game",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open",
    "eslint": "eslint ./"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "eslint": "^6.1.0",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-config-node": "^4.0.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.1.2",
    "prettier": "^1.19.1",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  },
  "dependencies": {
    "redux-starter-kit": "^0.6.3"
  }
}

But it also didn't solve the problem. I appreciate your help!

Answer 1

You are extending from plugin:node/recommended which is for NodeJS. Node only supports require() which are CommonJS-style imports. There is no reason for your frontend application to be using this set of recommendations.

Remove plugin:node/recommended from the extends list

"extends": ["airbnb-base", "prettier"],