Eslint-plugin-react: error Parsing error: Unexpected token <

[jeff1evesque]

I've installed the following within my .travis.yml:

...
  - npm install -g eslint babel-eslint
  - npm install -g eslint-plugin-react
...

However, implementing eslint on my jsx templates, generate the following traceback errors, from my travis ci:

...
$ eslint . --ext=jsx -c test/config/eslint.json

/home/travis/build/jeff1evesque/machine-learning/src/jsx/import/general/spinner.jsx

  13:16  error  Parsing error: Unexpected token <

/home/travis/build/jeff1evesque/machine-learning/src/jsx/import/general/submit.jsx

  17:16  error  Parsing error: Unexpected token <

/home/travis/build/jeff1evesque/machine-learning/src/jsx/import/input-data/supply_dataset_file.jsx

  86:13  error  Parsing error: Unexpected token <

/home/travis/build/jeff1evesque/machine-learning/src/jsx/import/input-data/supply_dataset_url.jsx

  79:13  error  Parsing error: Unexpected token <

/home/travis/build/jeff1evesque/machine-learning/src/jsx/import/input-data/supply_predictors.jsx

  52:13  error  Parsing error: Unexpected token <

/home/travis/build/jeff1evesque/machine-learning/src/jsx/import/result/result_display.jsx

  23:17  error  Parsing error: Unexpected token <

/home/travis/build/jeff1evesque/machine-learning/src/jsx/import/session-type/data_append.jsx

  13:1  error  Parsing error: The keyword 'import' is reserved

/home/travis/build/jeff1evesque/machine-learning/src/jsx/import/session-type/data_new.jsx

  10:1  error  Parsing error: The keyword 'import' is reserved

/home/travis/build/jeff1evesque/machine-learning/src/jsx/import/session-type/model_generate.jsx

  66:13  error  Parsing error: Unexpected token <

/home/travis/build/jeff1evesque/machine-learning/src/jsx/import/session-type/model_predict.jsx

  10:1  error  Parsing error: The keyword 'import' is reserved

/home/travis/build/jeff1evesque/machine-learning/src/jsx/select_session.jsx

  10:1  error  Parsing error: The keyword 'import' is reserved

✖ 11 problems (11 errors, 0 warnings)

The command "eslint . --ext=jsx -c test/config/eslint.json" exited with 1.
...

This is strange, because nothing substantial has changed in my jsx templates. And just last week, my eslint, had no problems linting within my travis ci. Perhaps latest changes within this repo, has broke my linting process?

Note: travis ci build logs can be reviewed, to see when eslint refused to accept my jsx syntax.

[jeff1evesque]

Even though the eslint fails, with the above copied traceback, from my travis ci implementation, doing a manual vagrant up, on my repository:

• https://github.com/jeff1evesque/machine-learning

yields a fully functional project (on the master branch). So, the eslint generates the above errors, even though my react jsx templates, are working as I intend.

[ljharb]

For one, React needs to be in scope for jsx to work, and you aren't requiring React in any of those files.

[jeff1evesque]

For one, React needs to be in scope for jsx to work, and you aren't requiring React in any of those files.

My react is working fine. I did a fresh build off a vagrant up. All my jsx eventually ends up as minified javascript. I'm not using require(), if that's what you're wondering. I'm using es6's import / export. Nevertheless, I haven't figured out yet, why my travis ci has suddenly broke, with respect to eslint.

[jeff1evesque]

The following is my eslint.json configuration, used via eslint, within .travis.yml:

/**
 * eslint.json: this file provides a configuration of rules that eslint will
 *              implement, to validate 'jsx' files, when imported via the
 *              '-c [path/to/eslint.json]' flag.
 *
 * Note: eslint rules, and options are available:
 *
 *       https://github.com/yannickcr/eslint-plugin-react#configuration
 *       http://eslint.org/docs/rules/
 */
{
    "plugins": [
        "react"
    ],
    "ecmaFeatures": {
        "jsx": true,
        "modules": true
    },
    "rules": {
        "react/display-name": 1,
        "react/forbid-prop-types": 1,
        "react/jsx-boolean-value": 1,
        "react/jsx-closing-bracket-location": 1,
        "react/jsx-curly-spacing": 1,
        "react/jsx-handler-names": 1,
        "react/jsx-indent-props": 1,
        "react/jsx-key": 1,
        "react/jsx-max-props-per-line": 1,
        "react/jsx-no-bind": 1,
        "react/jsx-no-duplicate-props": 1,
        "react/jsx-no-literals": 1,
        "react/jsx-no-undef": 1,
        "react/jsx-pascal-case": 1,
        "react/jsx-quotes": 1,
        "react/jsx-sort-prop-types": 1,
        "react/jsx-sort-props": 1,
        "react/jsx-uses-react": 1,
        "react/jsx-uses-vars": 1,
        "react/no-danger": 1,
        "react/no-did-mount-set-state": 1,
        "react/no-did-update-set-state": 1,
        "react/no-direct-mutation-state": 1,
        "react/no-multi-comp": 1,
        "react/no-set-state": 1,
        "react/no-unknown-property": 1,
        "react/prefer-es6-class": 1,
        "react/prop-types": 1,
        "react/react-in-jsx-scope": 1,
        "react/require-extension": 1,
        "react/self-closing-comp": 1,
        "react/sort-comp": 1,
        "react/wrap-multilines": 1
    }
}

[yannickcr]

npm install -g eslint babel-eslint

Seems your problem come from here.

By doing this you are always installing the latest ESLint release, which can introduce some breaking changes if a new major version is released... and this is what happened a few days ago with the release of ESLint 2.0.0.

Since ESLint 2.0.0 the parser options format changed (migration guide), so with your current configuration the JSX/module support is not enabled.

You should replace

"ecmaFeatures": {
    "jsx": true,
    "modules": true
}

by

"parserOptions": {
    "ecmaFeatures": {
        "jsx": true,
        "modules": true
    }
}

Another solution is to use babel-eslint instead of the ESLint default parser (you are installing it but it is not used in your .eslintrc config file), for this add the following line in your .eslintrc

"parser": "babel-eslint"

Generally speaking you should at least fix the major versions of your dependencies to avoid future breaking changes, for example:

...
  - npm install -g [email protected] [email protected]
  - npm install -g [email protected]
...

[jeff1evesque]

@yannickcr, works, thank you! I will be implementing your additional suggestion, by installing all my package dependencies, at major versions.

[hybrisCole]

Got the same problem and tried this:

"parserOptions": {
      "ecmaVersion": 7,
      "sourceType": "module",
      "ecmaFeatures": {
          "jsx": true,
      }
  },

Did not want to go with the babel-eslint fix because I'm using react native I think that's an unnecesary extra step to transpile it.

[yannickcr]

babel-eslint does not transpile your code, it just allow you to use the Babel parser (Babylon) instead of ESLint default one (Espree) to parse your code.

But can you post your full .eslintrc config file, the code that trigger the error and the eslint/eslint-plugin-react versions ? Thanks.

[hybrisCole]

Yup that's true hehe, sorry about the misconception.

Here's my .eslint:

{
  "parserOptions": {
      "ecmaVersion": 7,
      "sourceType": "module",
      "ecmaFeatures": {
          "jsx": true,
      }
  },
  "plugins": [
    "react",
    "react-native"
  ],
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "rules": {
    "comma-dangle" : 0,
    "react-native/no-unused-styles": 2,
    "react-native/split-platform-components": 2,
  },
  "settings": {
    "react": {
      "pragma": "React",
      "version": "0.14.8"
    }
  },
}

Here's my package.json:

{
  "name": "InternetTent",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "lint": "eslint *.js",
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "axios": "0.9.1",
    "react": "0.14.8",
    "react-native": "0.23.1"
  },
  "devDependencies": {
    "eslint": "2.7.0",
    "eslint-plugin-react": "4.3.0",
    "eslint-plugin-react-native": "1.0.0"
  }
}

So I'm basically learning React Native and wanted it to add eslint to my project, the code that fails is the tutorial code from React Native:

import React, {
  AppRegistry,
  Component,
  Image,
  StyleSheet,
  ListView,
  Text,
  View
} from 'react-native';
import { get } from 'axios';

I added "sourceType": "module", in the .eslintrc and import keyword error stopped happening,

Regards,

[landed1]

I am using webpack like this :

{ test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, include:"./src/", loader: 'babel', query: { presets: ['react', 'es2015', 'stage-0'], plugins: [ 'transform-runtime', 'transform-decorators-legacy', 'transform-object-rest-spread' ], cacheDirectory: true } }

Do we need 2 files ?
.eslint
.eslintrc

an where do both live ? I am hoping for project root.I am almost there with linting JSX in .js files in my react project its just failing to spot the

Clarity would be most welcome TY

[ljharb]

@landed1 See http://eslint.org/docs/user-guide/configuring. you usually only need .eslintrc, at the root of your project.

[landed1]

TY

[dhirajg27]

In .eslintrc replace

"ecmaFeatures": {
    "jsx": true,
    "modules": true
}

with

  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "modules": true,
      "experimentalObjectRestSpread": true
    }

[MartSerra]

I've tried the different versions of your configurations without success. But I follow this simple tutorial and it works, I hope it can helps you. 😄
Getting eslint right in React Native

[viraths]

"parserOptions": {
      "sourceType": "module",
      "ecmaFeatures": {
          "jsx": true,
      }
  }

ecmaVersion is optional

[ljharb]

I think ecmaVersion does need to be 6 or higher, but sourceType module probably sets that.

[xgqfrms-GitHub]

// redux constants

export const PAGE_SIZE = 3;

// [eslint] Parsing error: The keyword 'export' is reserved

.eslintrc

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            "modules": true,
            "experimentalObjectRestSpread": true
        }
    },
    "plugins": [
        "react"
    ],
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "rules": {
        "comma-dangle": 0
    },
    "settings": {
        "react": {
            "pragma": "React",
            "version": "15.4.2"
        }
    }
}

[ljharb]

@xgqfrms-GitHub That's really related to eslint core, and not eslint-plugin-react, so I'm not sure why you posted that here.

[xgqfrms-GitHub]

@ljharb

I just find this place by using google, and it works for me!
You know that somebody may also have this problem, so I think it will help by leaving a note.

[ljharb]

Your note doesn't explain how the problem was fixed - it just provides an eslintrc and a warning that can't appear if that eslintrc is used, that core eslint's docs would fix, and that has nothing to do whatsoever with this repo.

[xyzdata]

babel-eslint

https://github.com/eslint/eslint/issues/4636#issuecomment-162910216

[piperchester]

@hybrisCole 's suggestion worked for me - had to restart to Atom to pick up the changes 😅

[odm275]

I'm having this same issue.VScode's finds some eslint configuration that comes when you use create-react-app, and I'm getting this error. Any help is appreciated.

[MikeTheCanuck]

@odm275 can you post your full .eslintrc config file (if any), the specific error that's being thrown, the code that trigger the error and the eslint/eslint-plugin-react versions? [Heck, a link to the repo in question wouldn't hurt either.]

I've been using VSCode as my editor for a React project that I originally generated from create-react-app, and I've more or less gotten eslint wrangled into submission. You can see my setup here if that would help. It's possible you've installed the ESLint VSCode Extension or similar, which may be part or all of the source of the issue.

[golinmarq]

I got the same error [eslint] Parsing error: The keyword 'import' is reserved and here it is my .eslintrc. I don't know what could it be
```json
{
"plugins": [
"react"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true,
"experimentalObjectRestSpread": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true,
"mocha": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
"strict": [2, "safe"],
"no-debugger": 2,
"brace-style": [
2,
"1tbs",
{ "allowSingleLine": true }
],
"no-trailing-spaces": 2,
"keyword-spacing": 2,
"space-before-function-paren": [
2,
"never"
],
"spaced-comment": [2, "always"],
"vars-on-top": 2,
"no-undef": 2,
"no-undefined": 2,
"comma-dangle": [2, "never"],
"quotes": [2, "single"],
"semi": [2, "always"],
"guard-for-in": 2,
"no-eval": 2,
"no-with": 2,
"valid-typeof": 2,
"no-unused-vars": 2,
"no-continue": 1,
"no-extra-semi": 1,
"no-unreachable": 1,
"no-unused-expressions": 1,
"no-magic-numbers": 1,
"max-len": [1, 80, 4],
"react/prefer-es6-class": 1
}

[ljharb]

I’m not sure, but that’s an eslint issue, not an issue with this plugin.

[kselax]

I added to the .eslintrc and it doesn't help
{ "parserOptions": { "ecmaVersion": 7, "sourceType": "module", "ecmaFeatures": { "jsx": true, } }, "rules": { "semi": ["error", "always"], "quotes": ["error", "double"], } }

[jmalik001]

"parser": "babel-eslint" in .eslintrc.json solved my problem

[ljharb]

eslint has fixed its issue anyways.

[kmmbvnr]

Fixed by setting ecmaVersion and sourceType

  "eslintConfig": {
    "extends": "google",
    "parserOptions": {
      "ecmaVersion": 7,
      "sourceType": "module"
    }
  }

[ajzawawi]

sourceType: "module" works. If you're using VSCode or Atom, restarting the editor after making the change helps. It should pick it up after.

[cagross]

Hello. I'm still experiencing an issue in which ESLint reports:

Parsing error: The keyword 'import' is reserved

I've tried adding this to my .eslintrc.json file, but that did not change anything:

    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true,
            "modules": true
        }
    }

Here is some more info:

• I used Create React App to create a React app on my local computer.

• In my project is also installed ESLint, and eslint-plugin-react.

• There was initially no .eslintrc.json in my project's root directory.

• At that time, when I opened my JS file in VSCode, ESLint flagged two violations:

Expected to return a value at the end of function.
Expected to return a value at the end of arrow function.

screenshot.

• I have now created a file .eslintrc.json, saved it in my project's root directory, and added only this:

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

After I did so, and opened my same JS file in VSCode, ELint instead flagged one single violation:

error Parsing error: The keyword 'import' is reserved

screenshot.

• In an effort to fix that, to my .eslintrc.json file, I added the suggestions in this thread, so the entire contents are now:

{
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true,
            "modules": true
        }
    }
}

But when I open my file in VSCode, the same parsing error is present.

Any ideas how to troubleshoot this?

[ljharb]

Your eslint config is incorrect; there’s no modules true. You want sourceType: module.

Please file a new issue if you have further questions.

[cagross]

@ljharb OK thanks. That was indeed my issue. It's all working now, thanks!

[StormiFire]

Did anyone try this with their .eslintrc.js?

module.exports = {
  "extends": [
    "eslint:recommended",
  ],
  "parser": "babel-eslint"
};

I did that and it works perfectly fine for using something like import * as firebase from 'firebase/app'