Parsing Error The Keyword import is Reserved (Subl

Question

I have a problem with eslint, it gives me [Parsing Error The keyword import is reserve] this is only occur in sublime, in atom editor work well. I have eslint

.eslintrc.js

module.exports = {
    "extends": "airbnb",
    "plugins": [
        "react"
    ]
};

package.json

{
  "name": "paint",
  "version": "0.0.0",
  "description": "paint on the browser",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "paint",
    "javascript"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browserify": "^11.2.0",
    "eslint": "^2.2.0",
    "eslint-config-airbnb": "^2.1.1",
    "eslint-plugin-react": "^3.11.2",
    "gulp-babel": "^5.2.1",
    "gulp-clean": "^0.3.1",
    "gulp-stylus": "^2.2.0",
    "vinyl-source-stream": "^1.1.0"
  }
}

Answer 1

Spent 30 mins - trying all solutions but dint work, so sharing this one.

The issue is seen with new react app, and in Visual Code, even at this time - Apr 2020.

1. Create a file .eslintrc.js in the root folder (beside package.json, or beside /src/ directory)
2. Paste below contents in .eslintrc.js
3. Restart your editor, like VS Code.
4. Now I can see real errors, instead of those fake import/export errors.

.eslintrc.js file contents:

module.exports = {
  env: {
    commonjs: true,
    node: true,
    browser: true,
    es6: true,
    jest: true,
  },
  extends: ["eslint:recommended", "plugin:react/recommended"],
  globals: {},
  parser: "babel-eslint",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: "module",
  },
  plugins: ["react", "import", "react-hooks"],
  ignorePatterns: ["node_modules/"],
  rules: {},
  settings: {
    react: {
      version: "latest", // "detect" automatically picks the version you have installed.
    },
  },
};

Hope that helps.

Answer 2

i also got this error in a meteor project and i could solved it setting sourceType to "module" more details can be found in Eslint docs: http://eslint.org/docs/user-guide/configuring#specifying-parser-options

Answer 3

This config worked for me. (I am using create-react-app but applicable to any eslint project)

---

.eslintrc (create file in root if it doesnt exist)

{
    "rules": {
      "jsx-a11y/anchor-is-valid": [ "error", {
        "components": [ "Link" ],
        "specialLink": [ "to" ]
      }]
    },
    "parserOptions": {
        "sourceType": "module",
        "ecmaVersion": 2015
    }
  }

Answer 4

Add this to the root of your .eslintrc

"parser": "babel-eslint"

and make sure to run:

npm i babel-eslint --save-dev

Answer 5

The eslint option that solves the "The keyword import is reserved" error is parserOptions.sourceType. Setting it to "module" allows the import keyword to be used.

.eslintrc

{
    "parserOptions": {
        "sourceType": "module"
    }
}

Docs: https://eslint.org/docs/user-guide/configuring#specifying-parser-options

Answer 6

I found this issue while creating the vue project (Used Editor: Visual Code)

Install babel-eslint package -> npm install babel-eslint

Create the .eslintrc.js file and add below code

module.exports = { root: true, parserOptions: { 'sourceType': 'module', parser: 'babel-eslint'
} }

=> npm run serve, that error will be resolved like magic.