Eslint-plugin-react: TypeError: Cannot read property 'range' of null

Created on 24 Jun 2019 · 8Comments · Source: yannickcr/eslint-plugin-react

The below error occurs when trying to lint some of our code on versions v7.13.0 and v7.14.0. I have not tested older versions to see if it is there as well.

I don't know if it's relevant, but the specific line the linting is failing on is:

{ $like: `%${filter.value.trim().toLowerCase()}%` }

That line is within this larger block:

case projectFilterTypesDict.TITLE:
    if (filter.value) {
        queryWhereOptions.push(Sequelize.where(
            Sequelize.fn(
                'lower',
                Sequelize.col('project.title')
            ),
            { $like: `%${filter.value.trim().toLowerCase()}%` }
        ));
    }
    break;

Stacktrace:

TypeError: Cannot read property 'range' of null
Occurred while linting [pathToMyRepo]/[pathToMyFile]/[myFile].js:321
    at SourceCode.getTokenBefore ([pathToMyRepo]/node_modules/eslint/lib/token-store/index.js:303:18)
    at checkSpacingBefore ([pathToMyRepo]/node_modules/eslint/lib/rules/template-curly-spacing.js:60:42)
    at TemplateElement [pathToMyRepo]/node_modules/eslint/lib/rules/template-curly-spacing.js:119:17)
    at listeners.(anonymous function).forEach.listener ([pathToMyRepo]/node_modules/eslint/lib/util/safe-emitter.js:45:58)
    at Array.forEach (<anonymous>)
    at Object.emit ([pathToMyRepo]/node_modules/eslint/lib/util/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector ([pathToMyRepo]/node_modules/eslint/lib/util/node-event-generator.js:251:26)
    at NodeEventGenerator.applySelectors ([pathToMyRepo]/node_modules/eslint/lib/util/node-event-generator.js:280:22)
    at NodeEventGenerator.enterNode ([pathToMyRepo]/node_modules/eslint/lib/util/node-event-generator.js:294:14)
    at CodePathAnalyzer.enterNode (/[pathToMyRepo]/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:632:23)

bug help wanted

Source

MatthewHerbst

Most helpful comment

seems I use babel-eslint@8, could help me to fix it
npm i babel-eslint@8

crossSulation on 18 Dec 2019

👍3 ❤1

All 8 comments

Update: Another line it fails on:

return `#${this.number} ${this.title}`;

Within:

name() {
    if (this.title && this.number) {
        return `#${this.number} ${this.title}`;
    }
    if (this.title && this.appendixId) {
        return `${this.appendixId} - ${this.title}`;
    }
    return this.filename;
},

MatthewHerbst on 24 Jun 2019

What’s your eslint config (specifically, the parser)?

ljharb on 24 Jun 2019

Also, what version of eslint etc?

ljharb on 24 Jun 2019

Versions:

    "babel-eslint": "^10.0.2",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-mocha": "^5.3.0",
    "eslint-plugin-react": "^7.13.0",
    "eslint-plugin-react-hooks": "^1.6.0",
    "eslint-plugin-security": "^1.4.0",

.eslintrc

{
  "extends": ["airbnb"],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaFeatures": {
      "legacyDecorators": true
    }
  },
  "plugins": [
    "mocha",
    "react-hooks"
  ],
  "rules": {
    "indent": ["error", 4],
    "max-len": ["error", 100, 4, {
      "ignoreComments": true,
      "ignoreRegExpLiterals": true,
      "ignoreStrings": true,
      "ignoreTemplateLiterals": true,
      "ignoreTrailingComments": true,
      "ignoreUrls": true
    }],

    "arrow-body-style": "off",
    "class-methods-use-this": "off",
    "comma-dangle": ["error", {
      "arrays": "always-multiline",
      "objects": "always-multiline",
      "imports": "always-multiline",
      "exports": "always-multiline",
      "functions": "never"
    }],
    "consistent-return": "off",
    "func-names": "off",
    "global-require": "off",
    "import/prefer-default-export": "off",
    "import/named": "off",
    "import/no-cycle": "off",
    "import/no-extraneous-dependencies": ["error", {
      "devDependencies": ["webpack/*", "**/tests/**/*.js"]
    }],
    "jsx-a11y/anchor-is-valid": "off",
    "jsx-a11y/click-events-have-key-events": "off",
    "jsx-a11y/label-has-associated-control": "off",
    "jsx-a11y/label-has-for": "off",
    "jsx-a11y/no-autofocus": "off",
    "jsx-a11y/no-static-element-interactions": "off",
    "jsx-a11y/no-noninteractive-element-interactions": "off",
    "mocha/handle-done-callback": "error",
    "mocha/no-exclusive-tests": "error",
    "mocha/no-global-tests": "error",
    "mocha/no-identical-title": "error",
    "mocha/no-mocha-arrows": "off",
    "mocha/no-nested-tests": "error",
    "mocha/no-pending-tests": "error",
    "mocha/no-return-and-callback": "error",
    "mocha/no-setup-in-describe": "off",
    "mocha/no-sibling-hooks": "error",
    "mocha/no-skipped-tests": "error",
    "mocha/no-synchronous-tests": "off",
    "mocha/no-top-level-hooks": "error",
    "mocha/no-async-describe": "error",
    "no-param-reassign": "off",
    "no-plusplus": "off",
    "no-prototype-builtins": "off",
    "no-underscore-dangle": ["error", {
      "allow": [
        "__PROD__",
        "__STAGING__",
        "__DEV__",
      ]
    }],
    "object-curly-newline": "off",
    "operator-linebreak": ["error", "after"],
    "prefer-arrow-callback": "off",
    "prefer-destructuring": "off",
    "prefer-spread": "off",
    "react/button-has-type": "off",
    "react/destructuring-assignment": "off",
    "react/forbid-prop-types": "off",
    "react/jsx-filename-extension": "off",
    "react/jsx-indent": ["error", 4],
    "react/jsx-indent-props": ["error", 4],
    "react/jsx-no-bind": ["error", {
      "ignoreDOMComponents": false,
      "ignoreRefs": false,
      "allowArrowFunctions": true,
      "allowFunctions": true,
      "allowBind": false
    }],
    "react/jsx-one-expression-per-line": "off",
    "react/jsx-wrap-multilines": ["error", {
      "logical": "ignore"
      }],
    "react/no-array-index-key": "off",
    "react/no-find-dom-node": "warn",
    "react/prefer-stateless-function": "off",
    "react/require-default-props": "off",
    "react/sort-comp": ["error", {
      "order": [
        "static-methods",
        "everything-else",
        "render"
      ]
    }],
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "error",
    "space-before-function-paren": ["error", {
      "anonymous": "never",
      "asyncArrow": "always",
      "named": "never"
    }],
    "valid-jsdoc": ["error", {
      "preferType": {
        "Any": "any",
        "Boolean": "boolean",
        "Number": "number",
        "String": "string"
      },
      "requireParamDescription": false,
      "requireParamType": false,
      "requireReturn": false,
      "requireReturnDescription": false,
      "requireReturnType": false
    }]
  },
  "globals": {
    "__PROD__": false,
    "__STAGING__": false,
    "__DEV__": false,
  }
}

MatthewHerbst on 24 Jun 2019

From what I see there is no mention of eslint-plugin-react in the stacktrace and the issue is from babel-eslint (source: https://github.com/eslint/eslint/issues/9872 that redirects to https://github.com/babel/babel-eslint/issues/530).

Upgrading babel and babel-eslint and their dependencies should fix it.

Closing this issue as it is not related to eslint-plugin-react