TypeError: Cannot read property 'range' of null

[jayenashar]

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

[babel-bot]

Hey @jayenashar! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

[JLHwung]

Do you have multiple copies of @babel/types in node_modules? See also #12985 (comment)

[jayenashar]

i think i only have one copy

$ find -name types | grep @babel
./node_modules/@babel/types

├─┬ jscpd@3.3.25
│ └─┬ @jscpd/finder@3.3.25
│   └─┬ pug@3.0.2
│     └─┬ pug-code-gen@3.0.2
│       ├─┬ constantinople@4.0.1
│       │ └── @babel/types@7.13.13  deduped
│       └─┬ with@7.0.2
│         ├── @babel/types@7.13.13  deduped
│         └─┬ babel-walk@3.0.0-canary-5
│           └── @babel/types@7.13.13  deduped
└─┬ react-scripts@4.0.3
  ├─┬ @babel/core@7.12.3
  │ ├─┬ @babel/generator@7.13.9
  │ │ └── @babel/types@7.13.13  deduped
  │ ├─┬ @babel/helper-module-transforms@7.13.12
  │ │ ├─┬ @babel/helper-module-imports@7.13.12
  │ │ │ └── @babel/types@7.13.13  deduped
  │ │ ├─┬ @babel/helper-replace-supers@7.13.12
  │ │ │ ├─┬ @babel/helper-member-expression-to-functions@7.13.12
  │ │ │ │ └── @babel/types@7.13.13  deduped
  │ │ │ ├─┬ @babel/helper-optimise-call-expression@7.12.13
  │ │ │ │ └── @babel/types@7.13.13  deduped
  │ │ │ └── @babel/types@7.13.13  deduped
  │ │ ├─┬ @babel/helper-simple-access@7.13.12
  │ │ │ └── @babel/types@7.13.13  deduped
  │ │ ├─┬ @babel/helper-split-export-declaration@7.12.13
  │ │ │ └── @babel/types@7.13.13  deduped
  │ │ └── @babel/types@7.13.13  deduped
  │ ├─┬ @babel/helpers@7.13.10
  │ │ └── @babel/types@7.13.13  deduped
  │ ├─┬ @babel/template@7.12.13
  │ │ └── @babel/types@7.13.13  deduped
  │ ├─┬ @babel/traverse@7.13.13
  │ │ ├─┬ @babel/helper-function-name@7.12.13
  │ │ │ ├─┬ @babel/helper-get-function-arity@7.12.13
  │ │ │ │ └── @babel/types@7.13.13  deduped
  │ │ │ └── @babel/types@7.13.13  deduped
  │ │ └── @babel/types@7.13.13  deduped
  │ └── @babel/types@7.13.13 
  ├─┬ @svgr/webpack@5.5.0
  │ ├─┬ @babel/preset-env@7.13.12
  │ │ ├─┬ @babel/plugin-proposal-async-generator-functions@7.13.8
  │ │ │ └─┬ @babel/helper-remap-async-to-generator@7.13.0
  │ │ │   ├─┬ @babel/helper-wrap-function@7.13.0
  │ │ │   │ └── @babel/types@7.13.13  deduped
  │ │ │   └── @babel/types@7.13.13  deduped
  │ │ ├─┬ @babel/plugin-transform-classes@7.13.0
  │ │ │ └─┬ @babel/helper-annotate-as-pure@7.12.13
  │ │ │   └── @babel/types@7.13.13  deduped
  │ │ ├─┬ @babel/plugin-transform-exponentiation-operator@7.12.13
  │ │ │ └─┬ @babel/helper-builder-binary-assignment-operator-visitor@7.12.13
  │ │ │   ├─┬ @babel/helper-explode-assignable-expression@7.13.0
  │ │ │   │ └── @babel/types@7.13.13  deduped
  │ │ │   └── @babel/types@7.13.13  deduped
  │ │ ├─┬ @babel/plugin-transform-modules-systemjs@7.13.8
  │ │ │ └─┬ @babel/helper-hoist-variables@7.13.0
  │ │ │   └── @babel/types@7.13.13  deduped
  │ │ ├─┬ @babel/preset-modules@0.1.4
  │ │ │ └── @babel/types@7.13.13  deduped
  │ │ └── @babel/types@7.13.13  deduped
  │ ├─┬ @babel/preset-react@7.13.13
  │ │ └─┬ @babel/plugin-transform-react-jsx@7.13.12
  │ │   └── @babel/types@7.13.13  deduped
  │ └─┬ @svgr/plugin-jsx@5.5.0
  │   └─┬ @svgr/hast-util-to-babel-ast@5.5.0
  │     └── @babel/types@7.13.13  deduped
  ├─┬ babel-eslint@10.1.0
  │ └── @babel/types@7.13.13  deduped
  ├─┬ babel-jest@26.6.3
  │ ├─┬ @types/babel__core@7.1.14
  │ │ ├── @babel/types@7.13.13  deduped
  │ │ ├─┬ @types/babel__generator@7.6.2
  │ │ │ └── @babel/types@7.13.13  deduped
  │ │ └─┬ @types/babel__template@7.4.0
  │ │   └── @babel/types@7.13.13  deduped
  │ └─┬ babel-preset-jest@26.6.2
  │   └─┬ babel-plugin-jest-hoist@26.6.2
  │     └── @babel/types@7.13.13  deduped
  ├─┬ babel-preset-react-app@10.0.0
  │ ├─┬ @babel/plugin-proposal-optional-chaining@7.12.1
  │ │ └─┬ @babel/helper-skip-transparent-expression-wrappers@7.12.1
  │ │   └── @babel/types@7.13.13  deduped
  │ └─┬ @babel/preset-env@7.12.1
  │   └── @babel/types@7.13.13  deduped
  └─┬ jest-circus@26.6.0
    ├─┬ @types/babel__traverse@7.11.1
    │ └── @babel/types@7.13.13  deduped
    └─┬ jest-snapshot@26.6.2
      └── @babel/types@7.13.13  deduped

[nicolo-ribaudo]

Was not able to reproduce in codesandbox.

Could you try copying your package.json and package-lock.json files in a separate repository, running npm ci to install exactly the same dependencies, and see if you can then reproduce it?

[jayenashar]

i did try various package versions and cleaning package-lock.json and node_modules.

i have now tried what you suggested. can reproduce with the eslintrc above. pushed to https://github.com/jayenashar/babel-issues-13060 running with npx eslint --config eslintrc-that-CRA4-wont-find.json test.js

[jayenashar]

may be worth pointing out that eslint works with either jscpd or source-map-explorer, but not both

[nicolo-ribaudo]

Thanks for the repro! It's 2 am here so I won't take a look at it now, but I'll do it in the next few days (unless @JLHwung does it first!).

[jayenashar]

thanks for telling me how to repro!

[fedeci]

I can look into this!

[nicolo-ribaudo]

Oh thanks @fedeci!

[fedeci]

@babel/parser is parsing incorrectly TemplateLiteral quasis locations, it excludes ${ and } before and after an expression. ASTExplorer.

[nicolo-ribaudo]

@fedeci I'm not sure if it's just ASTExplorer that resets the config when sharing a link, but should enable the estree plugin (since that's what Babel does when used with ESLint).

[fedeci]

It is the same for @babel/parser, @babel/eslint-parser and espree. @typescript-eslint/parser is parsing those also.

[jayenashar]

based on #13060 (comment) and #13060 (comment) i suspect something is duplicated, but i can't spot it. is there a way to get a list of all duplicates?

[JLHwung]

Thanks for the reproducing repo. This is facebook/create-react-app#10636

The linting error is thrown from babel-eslint@10

npm ls babel-eslint
ionic-ride-the-waverley-app@0.0.1 /tmp/babel-issues-13060
└─┬ react-scripts@4.0.3
  └── babel-eslint@10.1.0

which is expected since babel-eslint 10 does not support optional chaining and had been deprecated.

@fedeci The position of template literal is adjusted in @babel/eslint-parser

babel/eslint/babel-eslint-parser/src/convert/convertAST.js

Lines 64 to 80 in 5c0d2f6

	if (path.isTemplateLiteral()) {
	for (let i = 0; i < node.quasis.length; i++) {
	const q = node.quasis[i];
	q.range[0] -= 1;
	if (q.tail) {
	q.range[1] += 1;
	} else {
	q.range[1] += 2;
	}
	q.loc.start.column -= 1;
	if (q.tail) {
	q.loc.end.column += 1;
	} else {
	q.loc.end.column += 2;
	}
	}
	}

so the position info on astexplorer does not match exactly to what we have in @babel/eslint-parser.

[fedeci]

That's strange, because both @babel/parser and @babel/eslint-parser parse the same exact location data🤔

[JLHwung]

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

babel/eslint/babel-eslint-parser/src/index.js

Line 46 in 5c0d2f6

convert(ast, code);

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.

[birdofpreyru]

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).