Nextjs Reactjs: Unexpected token '<' Error when using eslint

Question

I am working on a Nextjs-React application, and am getting this error when I run npm run lint Error: ../../Projects/app/pages/index.js ESlint Parsing error: Unexpected token < for all of the .js files that have jsx in them. So seems to me that eslint does not like having JSX in files with extension '.js'

These are my babel eslint packages:

 "babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-eslint": "^7.1.0",
"babel-loader": "^6.2.7",
"babel-plugin-rewire": "^1.0.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-latest": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-react-optimize": "^1.0.1",
"babel-types": "^6.18.0",
"eslint": "^3.9.1",
"eslint-config-airbnb": "^13.0.0",
"eslint-loader": "^1.6.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.6.0",
"webpack": "^1.13.3",
"webpack-hot-middleware": "^2.13.2",
"webpack-middleware": "^1.5.1"

And these are my rules:

"babel": {
"presets": [
  "react",
  "latest"
],
"plugins": [
  "syntax-trailing-function-commas",
  "transform-async-to-generator",
  "transform-es2015-destructuring",
  "transform-es2015-parameters",
  "transform-es2015-duplicate-keys",
  "transform-es2015-modules-commonjs",
  "transform-exponentiation-operator",
  "transform-runtime"
],
"env": {
  "test": {
    "plugins": [
      "rewire"
    ]
  }
}},

Eslint configs:

"eslintConfig": {
"parser": "babel-eslint",
"extends": "airbnb",
"env": {
  "browser": true
},
"rules": {
  "jsx-quotes": [
    2,
    "prefer-double"
  ],
  "no-confusing-arrow": 0,
  "react/jsx-filename-extension": [
    1,
    {
      "extensions": [".js", ".jsx"]
    }
  ],
  "react/jsx-quotes": 0,
  "react/jsx-boolean-value": 0,
  "jsx-a11y/anchor-has-content": "off",
  "import/extensions": "off",
  "comma-dangle": [
    2,
    {
      "arrays": "always-multiline",
      "objects": "always-multiline",
      "imports": "always-multiline",
      "exports": "always-multiline",
      "functions": "ignore"
    }
  ],
  "no-plusplus": [
    2,
    {
      "allowForLoopAfterthoughts": true
    }
  ]
}},

Not sure how to resolve this, I've checked other answers online but none helped. Setting specific rule "rules": { "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] } also didnt help. The code builds just fine, it just the linter fails

Have you looked at this issue? https://github.com/yannickcr/eslint-plugin-react/issues/447#issuecomment-184617282 — Mμ., Jun 16 '17 at 03:21
I did, I am doing what he suggested, am using ```"parser": "babel-eslint"``` instead of `babel` as my parser, but am still stuck — user988544, Jun 16 '17 at 21:09

score 0 · Accepted Answer · answered Jun 21 '17 at 20:49

0

Resolved with this answer. The problem was that I was not transpiling the webpack config code as .babelrc would override my configs at webpack level

answered Jun 21 '17 at 20:49

user988544

556
1
11
32

Nextjs Reactjs: Unexpected token '<' Error when using eslint

1 Answers1