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.

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

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.

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

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

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

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.

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.

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,

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

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"], } }

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

eslint has fixed its issue anyways.

Fixed by setting ecmaVersion and sourceType

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

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

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'