Parsing Error The Keyword import is Reserved (SublimeLinter-contrib-eslint)

user_5824136 0
Viewed 149188

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"
  }
}
sublimetext eslint parsing javascript
13 Answers

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

The issue is seen with new react app, and in Visual Studio 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.

user_9844710

Closing VS code and re-open it does the trick for me...

user_63017620

The accepted answer works, however, is no longer under maintenance and the newly suggested approach is to use the version from the mono repo instead.

Installation

$ npm install eslint @babel/core @babel/eslint-parser --save-dev
# or
$ yarn add eslint @babel/core @babel/eslint-parser -D

.eslintrc.js

module.exports = {
  parser: "@babel/eslint-parser",
};

Reference

user_25594490

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
    }
  }
user_7412510

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.

user_130678280

The same issue occurred when creating js files within a typescript react-native project while eslint is enabled.

Changing the file type from js to ts resolved the issue.

Also, adding the .eslintrc.js file as mentioned in previous answers resolved the issue without changing the file type from js to ts.

       module.exports = {
          parser: "@babel/eslint-parser",
       };
user_130808360

Adding ecmaVersion to .eslintrc.json fixed the issue

{
    "ecmaVersion": 2015,
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ]
}
user_77377770

The issue is seen with the new react app, and in Visual Studio Code, even at this time - August 2022

Create a file .eslintrc.js in the root folder Paste the below contents in .eslintrc.js Restart your editor, like VS Code. Now I can see real errors, instead of those fake import/export errors. .eslintrc.js file contents:

   export const parser = "@babel/eslint-parser";

The accepted answer works, however, the newly suggested approach is to use the version from ES6.

user_169787630
Related