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

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.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 11
  • Comments: 36 (11 by maintainers)

Commits related to this issue

Most upvoted comments

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 eslint@1.x.x babel-eslint@4.x.x
  - npm install -g eslint-plugin-react@3.x.x
...

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.

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,

// 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"
        }
    }
}

In .eslintrc replace

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

with

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

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

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.

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'

@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.

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

@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.

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

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