Ad

Nextjs Reactjs: Unexpected Token '<' Error When Using Eslint

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

Ad

Answer

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

Ad
source: stackoverflow.com
Ad