TypeError: Cannot read property 'range' of null

See original GitHub issue

Bug Report

  • I would like to work on a fix!

Current behavior

TypeError: Cannot read property 'range' of null
Occurred while linting /home/jayen/docs/work/ridethewaverley/ride-the-waverley/src/util/writeresource.js:1
    at OffsetStorage.setDesiredOffset (/home/jayen/docs/work/ridethewaverley/ride-the-waverley/node_modules/eslint/lib/rules/indent.js:341:45)
    at /home/jayen/docs/work/ridethewaverley/ride-the-waverley/node_modules/eslint/lib/rules/indent.js:1397:29
    at Array.forEach (<anonymous>)
    at Object.TemplateLiteral [as listener] (/home/jayen/docs/work/ridethewaverley/ride-the-waverley/node_modules/eslint/lib/rules/indent.js:1389:34)
    at /home/jayen/docs/work/ridethewaverley/ride-the-waverley/node_modules/eslint/lib/rules/indent.js:1635:55
    at Array.forEach (<anonymous>)
    at Program:exit (/home/jayen/docs/work/ridethewaverley/ride-the-waverley/node_modules/eslint/lib/rules/indent.js:1635:26)
    at /home/jayen/docs/work/ridethewaverley/ride-the-waverley/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/home/jayen/docs/work/ridethewaverley/ride-the-waverley/node_modules/eslint/lib/linter/safe-emitter.js:45:38)

Was not able to reproduce in codesandbox.

Input Code

const foo = '';
require(`${foo}`)?.bar;

Expected behavior

Expected an assignment or function call and instead saw an expression. (no-unused-expressions)

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

  • Filename: eslintrc-that-CRA4-wont-find.json
{
  "extends": "react-app",
  "rules": {
    "array-bracket-spacing": [
      "error",
      "never"
    ],
    "comma-dangle": [
      "error",
      "always-multiline"
    ],
    "indent": [
      "error",
      2,
      {
        "CallExpression": {
          "arguments": "first"
        },
        "MemberExpression": "off",
        "flatTernaryExpressions": true,
        "ignoredNodes": [
          "JSXElement *"
        ]
      }
    ],
    "object-curly-spacing": [
      "error",
      "never"
    ],
    "react/jsx-indent-props": [
      "error",
      "first"
    ],
    "react/jsx-tag-spacing": [
      "error",
      {
        "beforeSelfClosing": "never",
        "beforeClosing": "never"
      }
    ],
    "react/self-closing-comp": [
      "error",
      {
        "component": true,
        "html": true
      }
    ],
    "sort-keys": [
      "error",
      "asc",
      {
        "caseSensitive": false,
        "natural": true
      }
    ],
    "sort-vars": "error"
  }
}

Environment

  System:
    OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
  Binaries:
    Node: 14.16.0 - /usr/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.11 - /usr/bin/npm
  npmPackages:
    @babel/eslint-parser: ^7.13.10 => 7.13.10 
    eslint: ^7.23.0 => 7.23.0 
  • Babel version(s): [7.12.3]
  • Node/npm version: [Node 14.16.0/npm 6.14.11]
  • OS: [Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)]
  • Monorepo: [no]
  • How you are using Babel: [eslint]

Possible Solution

No but my workaround is to separate the require from the optional chaining.

Additional context

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:2
  • Comments:18 (16 by maintainers)

github_iconTop GitHub Comments

4reactions
birdofpreyrucommented, Nov 1, 2021

As @fedeci suggests in his comment by the link above, the issue seems to be resolved in @babel/eslint-parser@7.16.0 (at least, it does not manifest itself in my project, where I experienced it before).

0reactions
JLHwungcommented, Mar 29, 2021

both @babel/parser and @babel/eslint-parser parse the same exact location data

https://github.com/babel/babel/blob/5c0d2f603272add0164fb4dc0d880ae9d867f31b/eslint/babel-eslint-parser/src/index.js#L46

Yeah, the convertAST is invoked after the source is parsed by Babel. The location adjustment is required because Babel and Espree have different opinion on the location of template quasis. Note that the ESTree, as an AST spec, does not specify how the range should be determined.

Read more comments on GitHub >

github_iconTop Results From Across the Web

eslint error cannot read property 'range' of null - Stack Overflow
I am using ES6 syntax. UPDATE: My solution was to use yarn instead of npm. Has solved the problem for the time being....
Read more >
Cannot read property 'range' of null · Issue #681 - GitHub
I get the error: Cannot read property 'range' of null. It seems to be an issue with using template literals that contain a...
Read more >
Syntax Error: TypeError: Cannot read property 'range' of null
I recently had the requirement to dynamically import a JSON file like in the code below. async created () { const url =...
Read more >
eslint/eslint - Gitter
Sounds like that's coming from elsewhere. Agree. That's the full error log: [1] TypeError: Cannot read property 'range' of null [1] Occurred while...
Read more >
TypeError: Cannot read property 'range' of undefined
function onEdit(e) {var cellaAttiva = e.range;} I wrote this simple line, it is part of a more complex code. But already in this...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found