eslint error cannot read property 'range' of null

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.

Looks like fixing the version of babel-eslint to 7.2.3 or 8.0.1 is a workaround. — Vasan
– Vasan, Commented Jan 22, 2018 at 23:42
:(. Pretty nasty. I am working on a project that does not like out-of-date modules. Some version of this tool is built into our pipeline github.com/Stono/hawkeye — jcgh582
– jcgh582, Commented Jan 22, 2018 at 23:47

Ilyich · Accepted Answer · 2019-12-19 17:10:03Z

41

These .eslintrc rules fixed the problem for me:

rules : {
  "template-curly-spacing" : "off",
  "indent": ["error", 2, {
    "ignoredNodes": ["TemplateLiteral"]
  }]
}

edited Dec 19, 2019 at 17:10

answered Dec 19, 2019 at 16:53

Ilyich

5,9123 gold badges42 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

aercolino Over a year ago

Nice. Just remember to delete node_modules/.cache before building again

B. Bohdan Over a year ago

Unfortunately, this approach breaks all extended rules.

Jared Tomaszewski Over a year ago

The "indent": ["error", 2, { "ignoredNodes": ["TemplateLiteral"] }] alone fixed it for me. Nice catch! Shouldn't this crash be considered a bug in eslint?

Ilyich Over a year ago

@JaredTomaszewski There are numerous issues in babel-eslint repo regarding this problem.

SergeyP · Accepted Answer · 2020-08-19 14:44:54Z

26

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

answered Aug 19, 2020 at 14:44

SergeyP

4495 silver badges8 bronze badges

Comments

whoan · Accepted Answer · 2020-03-09 00:27:21Z

15

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

answered Mar 9, 2020 at 0:27

whoan

8,6394 gold badges43 silver badges50 bronze badges

Comments

Brady Dowling · Accepted Answer · 2019-05-16 17:23:29Z

10

Fix the version of babel-eslint to 7.2.3 or 8.0.1 by running:

npm install --save-dev [email protected]

Or:

npm install --save-dev [email protected]

answered May 16, 2019 at 17:23

Brady Dowling

5,6325 gold badges42 silver badges67 bronze badges

1 Comment

aercolino Over a year ago

I didn't use this method because my babel-eslint was already at 10.0.3

Atika · Accepted Answer · 2021-08-10 09:53:21Z

2

I added only two rules in .eslintrc.js file and it resolved for me.

rules : {
    "template-curly-spacing" : "off",
    indent : "off"
  }

edited Aug 10, 2021 at 9:53

Atika

1,0672 gold badges8 silver badges18 bronze badges

answered Jul 22, 2021 at 10:32

sagar lambture

211 bronze badge

2 Comments

pmiranda Over a year ago

that will cause no warning but are you sure you want to off the indent rule?

Darren Shewry Over a year ago

agree with @pmiranda - this just turns off the rule, doesn't solve the issue

user3037779 · Accepted Answer · 2022-07-05 08:03:37Z

1

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

}]

answered Jul 5, 2022 at 8:03

user3037779

213 bronze badges

Comments

Alexander Swann · Accepted Answer · 2021-12-10 11:03:03Z

0

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

answered Dec 10, 2021 at 11:03

Alexander Swann

6396 silver badges15 bronze badges

Comments

Dulanga Heshan · Accepted Answer · 2023-09-14 15:33:25Z

0

I had the same problem because of the below code line in React (ESLint: 7.32.0).

const color = `rgba( ${greenValue}, ${255 - greenValue}, 0, 1)`;

So I changed it as below.

const color = 'rgba(' + greenValue + ',' + 255 - greenValue + ', 0, 1)';

and it worked for me

answered Sep 14, 2023 at 15:33

Dulanga Heshan

1,4271 gold badge22 silver badges39 bronze badges

Comments

Ghasem · Accepted Answer · 2020-07-25 11:14:09Z

-1

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

answered Jul 25, 2020 at 11:14

Ghasem

15.8k28 gold badges153 silver badges193 bronze badges

Collectives™ on Stack Overflow

eslint error cannot read property 'range' of null

9 Answers 9

4 Comments

Comments

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

4 Comments

Comments

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related