"TypeError: Cannot read property 'range' of null" when run "template-curly-spacing"

Tell us about your environment

• ESLint Version: v4.16.0

• Node Version: v8.9.3

• npm Version: v5.5.1

• os Version: macOS v10.12.6

What parser (default, Babel-ESLint, etc.) are you using? babel-eslint

Please show your full configuration:

Configuration

module.exports = {
  parser: 'babel-eslint',

  extends: [
    'airbnb',
    'plugin:css-modules/recommended',
    "plugin:jsx-control-statements/recommended"
  ],

  plugins: [
    'css-modules',
    "jsx-control-statements"
  ],

  globals: {
    __DEV__: true,
  },

  env: {
    browser: true,
  },

  rules: {
    // Not supporting nested package.json yet
    // https://github.com/benmosher/eslint-plugin-import/issues/458
    'import/no-extraneous-dependencies': 'off',

    // Recommend not to leave any console.log in your code
    // Use console.error, console.warn and console.info instead
    'no-console': [
      'error',
      {
        allow: ['warn', 'error', 'info'],
      },
    ],

    // Allow js files to use jsx syntax, too
    'react/jsx-filename-extension': 'off',

    // https://github.com/kriasoft/react-starter-kit/pull/961
    // You can reopen this if you still want this rule
    'react/prefer-stateless-function': 'off',


    'import/first': 'off',

    // disallow arrow functions where they could be confused with comparisons
    // http://eslint.org/docs/rules/no-confusing-arrow
    'no-confusing-arrow': 'off',

    // disallow declaration of variables that are not used in the code
    'no-unused-vars': 'off',

    // require the use of === and !==
    // http://eslint.org/docs/rules/eqeqeq
    eqeqeq: 'warn',

    // http://eslint.org/docs/rules/radix
    radix: 'error',


    // http://eslint.org/docs/rules/class-methods-use-this
    'class-methods-use-this': 'off',


    // http://eslint.org/docs/rules/no-param-reassign.html
    'no-param-reassign': 'warn',


    'no-return-assign': 'warn',

    // disallow declaration of variables already declared in the outer scope
    'no-shadow': 'warn',

    // disallow dangling underscores in identifiers
    'no-underscore-dangle': 'off',


    // http://eslint.org/docs/rules/no-restricted-syntax
    'no-restricted-syntax': [
      'error',
      {
        selector: 'ForInStatement',
        message: 'for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.',
      },
      {
        selector: 'LabeledStatement',
        message: 'Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.',
      },
      {
        selector: 'WithStatement',
        message: '`with` is disallowed in strict mode because it makes code impossible to predict and optimize.',
      },
    ],

    // disallow use of unary operators, ++ and --
    // http://eslint.org/docs/rules/no-plusplus
    'no-plusplus': 'off',


    // http://eslint.org/docs/rules/no-unused-expressions
    'no-unused-expressions': 'off',


    'camelcase': 'off',


    // http://eslint.org/docs/rules/no-use-before-define
    'no-use-before-define': ['warn', { functions: false, classes: false, variables: false }],


    'default-case': 'off',

    // http://eslint.org/docs/rules/one-var-declaration-per-line
    'one-var': 'off',


    'prefer-const': 'warn',

    // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md
    'jsx-a11y/alt-text': 'warn',

    // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md
    'jsx-a11y/label-has-for': ['error', { "required": { "some": ["nesting", "id"] }}],


    'no-nested-ternary': 'warn',


    // http://eslint.org/docs/rules/consistent-return
    'consistent-return': 'error',


    // http://eslint.org/docs/rules/no-empty
    'no-empty': ['error', { "allowEmptyCatch": true }],

    // Require modules with a single export to use a default export
    // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/prefer-default-export.md
    'import/prefer-default-export': 'off',

    // Prevent missing props validation in a React component definition
    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md
    'react/prop-types': ['warn', {
      ignore: [
        'form',
        'params',
        'location',
        'children'
      ],
      customValidators: [],
      skipUndeclared: false
    }],

    // 禁用continue
    // http://eslint.org/docs/rules/no-continue
    'no-continue': 'off',

    // http://eslint.org/docs/rules/no-mixed-operators
    'no-mixed-operators': 'off',


    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md
    'react/sort-comp': 'warn',

    // http://eslint.org/docs/rules/no-script-url
    'no-script-url': 'off',

    // Forbid certain propTypes (any, array, object)
    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md
    'react/forbid-prop-types': ['error', { forbid: [] }],

    // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md
    'jsx-a11y/no-static-element-interactions': 'warn',

    // http://eslint.org/docs/rules/comma-dangle
    "comma-dangle": ["error", "never"],

    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-default-props.md
    'react/require-default-props': 'warn',

    // specify the maximum length of a line in your program
    // http://eslint.org/docs/rules/max-len
    'max-len': ['warn', 120, 2, {
      ignoreUrls: true,
      ignoreComments: false,
      ignoreRegExpLiterals: true,
      ignoreStrings: true,
      ignoreTemplateLiterals: true,
    }],


    'jsx-a11y/href-no-hash': 'off',


    'react/no-array-index-key': 'off',

    // 暂时关掉，会报错 TypeError: Cannot read property 'properties' of undefined
    // 应该是eslint-plugin-react的原因，具体原因未知
    'react/no-unused-prop-types': 'off',

    // disallow irregular whitespace outside of strings and comments
    'no-irregular-whitespace': ['error', { skipStrings: true, skipComments: true, skipRegExps: true, skipTemplates: true }],

    // http://eslint.org/docs/rules/prefer-arrow-callback
    'prefer-arrow-callback': ["error", { "allowNamedFunctions": true }],

    // https://github.com/vkbansal/eslint-plugin-jsx-control-statements#important
    "react/jsx-no-undef": [2, { "allowGlobals": true }],

    // 在js中import ts文件时不适用
    "import/no-unresolved": 'off',
    "import/extensions": 'off',
    "no-loop-func": 'off',


    // "template-curly-spacing": 'off',
    // "indent": 'off'
  },

  settings: {
    // Allow absolute paths in imports, e.g. import Button from 'components/Button'
    // https://github.com/benmosher/eslint-plugin-import/tree/master/resolvers
    'import/resolver': {
      node: {
        moduleDirectory: ['node_modules', 'src'],
      },
    },
  },
}

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

import React, { Component } from 'react';

class TestComp extends Component {
  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const a = `haha`;
    return (
      <div>
        haha
      </div>
    );
  }
}

export default TestComp;

also, I change some sourceCode, try to find problems.

in node_modules/eslint/lib/token-store/index, getFirstToken

    getFirstToken(node, options) {
      const oneToken = createCursorWithSkip(
        cursors.forward,
          this[TOKENS],
          this[COMMENTS],
          this[INDEX_MAP],
          node.range[0],
          node.range[1],
          options
      ).getOneToken()
      console.log('getFirstToken, oneToken========-=-\n', oneToken);
      return oneToken;
    }

in node_modules/eslint/lib/token-store/backward-token-cursor.js, getOneToken

    getOneToken() {
        const oneToken = (this.index >= this.indexEnd) ? this.tokens[this.index] : null
        console.log('getOneToken------------\n', this.index, this.indexEnd, oneToken);
        return oneToken;
    }

node_modules/.bin/eslint src/TestComp.js

What did you expect to happen? everything fine, no error What actually happened? Please include the actual, raw output from ESLint. (something irrelevant omited)

getOneToken------------
 51 0 { type: 'Template',
  value: '`haha`',
  start: 420,
  end: 426,
  loc:
   { start: Position { line: 23, column: 14 },
     end: Position { line: 23, column: 20 } },
  range: [ 420, 426 ] }
getOneToken------------
 51 0 { type: 'Template',
  value: '`haha`',
  start: 420,
  end: 426,
  loc:
   { start: Position { line: 23, column: 14 },
     end: Position { line: 23, column: 20 } },
  range: [ 420, 426 ] }
getFirstToken, oneToken========-=-
 null
Cannot read property 'range' of null
TypeError: Cannot read property 'range' of null
    at SourceCode.getTokenBefore (/Users/kapono/Project/alertwebui/node_modules/eslint/lib/token-store/index.js:305:18)
    at checkSpacingBefore (/Users/kapono/Project/alertwebui/node_modules/eslint/lib/rules/template-curly-spacing.js:51:42)
    at TemplateElement (/Users/kapono/Project/alertwebui/node_modules/eslint/lib/rules/template-curly-spacing.js:115:17)
    at listeners.(anonymous function).forEach.listener (/Users/kapono/Project/alertwebui/node_modules/eslint/lib/util/safe-emitter.js:47:58)
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/kapono/Project/alertwebui/node_modules/eslint/lib/util/safe-emitter.js:47:38)
    at NodeEventGenerator.applySelector (/Users/kapono/Project/alertwebui/node_modules/eslint/lib/util/node-event-generator.js:251:26)
    at NodeEventGenerator.applySelectors (/Users/kapono/Project/alertwebui/node_modules/eslint/lib/util/node-event-generator.js:280:22)
    at NodeEventGenerator.enterNode (/Users/kapono/Project/alertwebui/node_modules/eslint/lib/util/node-event-generator.js:294:14)
    at CodePathAnalyzer.enterNode (/Users/kapono/Project/alertwebui/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:608:23)

I have tried to rm -rf node_modules and yarn or npm i for many times, but still catch it…

[MrHen]

I’m seeing the same error. My current versions of the plugins noted in the gist linked above:

├── babel-eslint@8.2.1
├── eslint@4.17.0
├── eslint-config-airbnb@16.1.0
├── eslint-plugin-import@2.8.0
├── eslint-plugin-jsx-a11y@6.0.3
├── eslint-plugin-react@7.6.1

This just started happening recently for me but the error is the same:

> eslint src "--fix"

Cannot read property 'range' of null
TypeError: Cannot read property 'range' of null
    at SourceCode.getTokenBefore (/Users/ababcock/Source/cxlint/client/node_modules/eslint/lib/token-store/index.js:303:17)
    at Object.isParenthesised (/Users/ababcock/Source/cxlint/client/node_modules/eslint/lib/ast-utils.js:259:38)
    at findClosingParen (/Users/ababcock/Source/cxlint/client/node_modules/eslint/lib/rules/arrow-body-style.js:94:30)
    at Object.fix (/Users/ababcock/Source/cxlint/client/node_modules/eslint/lib/rules/arrow-body-style.js:221:50)
    at normalizeFixes (/Users/ababcock/Source/cxlint/client/node_modules/eslint/lib/report-translator.js:185:28)
    at /Users/ababcock/Source/cxlint/client/node_modules/eslint/lib/report-translator.js:282:18
    at Object.report (/Users/ababcock/Source/cxlint/client/node_modules/eslint/lib/linter.js:945:62)
    at validate (/Users/ababcock/Source/cxlint/client/node_modules/eslint/lib/rules/arrow-body-style.js:198:29)
    at listeners.(anonymous function).forEach.listener (/Users/ababcock/Source/cxlint/client/node_modules/eslint/lib/util/safe-emitter.js:47:58)
    at Array.forEach (native)

I tried locking to the following version but saw no change:

├── babel-eslint@8.2.1
├── eslint@4.16.0
├── eslint-config-airbnb@16.1.0
├── eslint-plugin-import@2.8.0
├── eslint-plugin-jsx-a11y@6.0.3
├── eslint-plugin-react@7.5.1

[jaimefps]

Did anyone find a fix for this in the past few months?

I’m working on a project that has the same modules and versions as mentioned by @MrHen. The tests worked fine until last week. Today I started getting the error:

Cannot read property 'range' of null
TypeError: Cannot read property 'range' of null

UPDATE: change babel-eslint to 7.2.3 fixed it for me.