eslint error cannot read property 'range' of null - node-modules

Question

I have had the same eslint issue for days now.
Everyone on the team has the same eslintrc & installed version of eslint. Their eslint works fine, mine does not.
I have tried restarting my computer, deleting node_modules, deleting anything under my user (in home directory). Nothing works.
Issue:
./node_modules/.bin/eslint *.js*
 1 ↵  11504  10:19:47
Cannot read property 'range' of null
TypeError: Cannot read property 'range' of null
at SourceCode.getTokenBefore (/Users/jhill/gitRepo/sponsoroo/node_modules/eslint/lib/token-store/index.js:303:18)
at checkSpacingBefore (/Users/jhill/gitRepo/sponsoroo/node_modules/eslint/lib/rules/template-curly-spacing.js:52:42)
at TemplateElement (/Users/jhill/gitRepo/sponsoroo/node_modules/eslint/lib/rules/template-curly-spacing.js:117:17)
at listeners.(anonymous function).forEach.listener (/Users/jhill/gitRepo/sponsoroo/node_modules/eslint/lib/util/safe-emitter.js:47:58)
at Array.forEach (<anonymous>)
at Object.emit (/Users/jhill/gitRepo/sponsoroo/node_modules/eslint/lib/util/safe-emitter.js:47:38)
at NodeEventGenerator.applySelector (/Users/jhill/gitRepo/sponsoroo/node_modules/eslint/lib/util/node-event-generator.js:251:26)
at NodeEventGenerator.applySelectors (/Users/jhill/gitRepo/sponsoroo/node_modules/eslint/lib/util/node-event-generator.js:280:22)
at NodeEventGenerator.enterNode (/Users/jhill/gitRepo/sponsoroo/node_modules/eslint/lib/util/node-event-generator.js:294:14)
at CodePathAnalyzer.enterNode (/Users/jhill/gitRepo/sponsoroo/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:608:23)
Details
Version:
./node_modules/.bin/eslint --version
v4.16.0
.eslintrc
{
"extends": ["airbnb-base", "plugin:security/recommended"],
"rules": {
"import/prefer-default-export": "off",
"no-console": "off",
"class-methods-use-this": "off",
"global-require": "off",
"consistent-return": "off",
"import/no-extraneous-dependencies": ["error", {"devDependencies": true}],
/* JSX */
"jsx-quotes": [2, "prefer-double"],
/* React */
"react/display-name": 1,
"react/jsx-boolean-value": 1,
"react/jsx-no-duplicate-props": 1,
"react/jsx-no-undef": 1,
"react/jsx-quotes": 0,
"react/jsx-sort-props": 0,
"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-multi-comp": 1,
"react/no-unknown-property": 1,
"react/prop-types": 1,
"react/react-in-jsx-scope": 1,
"react/self-closing-comp": 1,
"react/sort-comp": 1,
"react/wrap-multilines": 0,
/* Security */
"security/detect-non-literal-fs-filename": 2,
"security/detect-non-literal-regexp": 2,
"security/detect-unsafe-regex": 2,
"security/detect-buffer-noassert": 2,
"security/detect-child-process": 2,
"security/detect-disable-mustache-escape": 2,
"security/detect-eval-with-expression": 2,
"security/detect-no-csrf-before-method-override": 2,
"security/detect-non-literal-require": 2,
"security/detect-object-injection": 2,
"security/detect-possible-timing-attacks": 1,
"security/detect-pseudoRandomBytes": 2,
"no-unsafe-innerhtml/no-unsafe-innerhtml": 2
},
"parser": "babel-eslint",
"plugins": [
"babel",
"react",
"security",
"no-unsafe-innerhtml"
],
"env": {
"jest": true,
"browser": true,
"es6": true,
"node": true
},
"settings": {
"import/extensions": {
"webpack": {
"config": "./webpack.config.react.js"
}
}
}
}
Also, if I delete "parser": "babel-eslint" from my .eslinrc, the problem/erorr goes away, but my eslint doesn't work. I am using ES6 syntax.
UPDATE:
My solution was to use yarn instead of npm. Has solved the problem for the time being.

Answer 1

These .eslintrc rules fixed the problem for me:
rules : {
"template-curly-spacing" : "off",
"indent": ["error", 2, {
"ignoredNodes": ["TemplateLiteral"]
}]
}

Answer 2

babel-eslint has been deprecated in favor of #babel/eslint-parser.
read here
Here are steps to upgrade from babel-eslint to #babel/eslint-parser:
replace babel-eslint with #babel/eslint-parser:
npm
npm uninstall babel-eslint babel-eslint-plugin
npm install --save-dev #babel/eslint-parser #babel/eslint-plugin
Yarn
yarn remove babel-eslint babel-eslint-plugin
yarn add --dev #babel/eslint-parser #babel/eslint-plugin
Upgrade .eslintrc.js:
module.exports = {
--- parser: "babel-eslint",
+++ parser: "#babel/eslint-parser"
plugins: [
--- "babel"
+++ "#babel
]
};

Answer 3

As #Vasan mentioned, specifically, on issue 530, this was the comment that helped me to solve the issue:
Most likely the issue is causing of wrong parsing.
import(`some_path/${variable}`) // issue exists
Fix
import("some_path" + variable) // issue fixed

Answer 4

Fix the version of babel-eslint to 7.2.3 or 8.0.1 by running:
npm install --save-dev babel-eslint#7.2.3
Or:
npm install --save-dev babel-eslint#8.0.1

Answer 5

I added only two rules in .eslintrc.js file and it resolved for me.
rules : {
"template-curly-spacing" : "off",
indent : "off"
}

Answer 6

Expanding off #SergeyP's answer above.
It's worth noting that you might need to set the requireConfigFile flag to false in your parserOptions if, like me, you get a Parsing error: No Babel config file detected error after following his instructions.
module.exports = {
parser: '#babel/eslint',
parserOptions: {
requireConfigFile: false,
},
// ...snip...
}
There is further information here in regards to this issue expanding on this.
https://github.com/babel/ember-cli-babel/issues/366

Answer 7

This is caused most probably due to indentation in Template Literals ,so to fix it just add below in your .eslintrc
"indent": ["error", 2, {
"ignoredNodes": ["TemplateLiteral"]
}]

Answer 8

For me a warning was showing for each string literal (e.g some text ${someVariable}) and installing these two packages solved my problem:
npm i #babel/types #babel/traverse --save-dev