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
- Update eslint settings to support the new options format. https://github.com/yannickcr/eslint-plugin-react/issues/447#issuecomment-184617282 — committed to micolaprs/comblabel by micolaprs 5 years ago
- Configure webpack (copied from source), babel. Because webpack uses eslint-loader, so have to configure eslintrc as well. Takes a while to figure out this. https://github.com/yannickcr/eslint-plugin-r... — committed to Annie-Huang/pluralsight-redux-app-used-to-build-script-update2019 by Annie-Huang 5 years ago
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
by
Another solution is to use
babel-eslintinstead of the ESLint default parser (you are installing it but it is not used in your.eslintrcconfig file), for this add the following line in your.eslintrcGenerally speaking you should at least fix the major versions of your dependencies to avoid future breaking changes, for example:
Got the same problem and tried this:
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:
Here’s my package.json:
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:
I added
"sourceType": "module",in the .eslintrc and import keyword error stopped happening,Regards,
.eslintrcIn .eslintrc replace
with
@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?I did that and it works perfectly fine for using something like
import * as firebase from 'firebase/app'@odm275 can you post your full
.eslintrcconfig 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 gotteneslintwrangled 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
6or 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.