"Cannot read property 'range' of null" with import syntax

[EzioW]

Here's my code:

export default pages.map(name => ({
  path: `/${name.toLowerCase()}`,
  component: React.lazy(() => import(`views/${name}`)),
}));

and get error in vscode eslint

Request textDocument/formatting failed.
Message: Request textDocument/formatting failed with message: Cannot read property 'range' of null
Occurred while linting ...
Code: -32603 

my eslint config

extends: ['airbnb'],
parser: 'babel-eslint',
parserOptions: {
  ecmaVersion: 7,
  ecmaFeatures: {
    legacyDecorators: true,
  },
  allowImportExportEverywhere: true,
},

versions

  "dependencies": {
    "babel-eslint": "^10.0.3",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-react-hooks": "^1.7.0"
  },

[xsq007]

I had the same issue. As a workaround, downgrade babel-eslint to 8.2.6.

[grovertb]

I have the same problem, but it occurs when in my .eslintrc I have the rule set

{
  ...
  ...
  "indent": [
    "error",
    "two",
    {
      "SwitchCase": 1
    }
  ]
}

when I remove it, it doesn't give this problem

[JakeBeresford]

I am also having this issue, seems to be related to using template literals.

I can confirm that locking down to 8.2.6 works as a temporary workaround, however not an ideal solution.

[grovertb]

I solved it this way in the package.json

{
    "resolutions": {
        "@babel/parser": "7.7.5"
    }
}

[j0Shi82]

Not sure where I got it from, but tweaking the rules in your eslint config (.eslintrc) can also solve the issue:

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

Fits the @grovertb observation that indent is causing the issue. Not sure you even have to turn off template-curly-spacing, haven't tested that.

[jpicton]

Also experiencing this issue with 10.0.3. Reverting to 8.2.6 (as mentioned earlier) solves the problem. Turning off the template-curly-spacing and indent rules also solves the problem.

Obviously neither of these workarounds is ideal. Is there anybody available to investigate this bug?

[yitomok]

Please search for existing issue before posting:

Workaround:

• npm: Template string failing with Cannot read property 'range' of null #799 (comment)
• yarn: Template string failing with Cannot read property 'range' of null #799 (comment)

Actual bug:

• Template string failing with Cannot read property 'range' of null babel#10904

[miladmeidanshahi]

just upgrade babel-eslint to fix

yarn upgrade babel-eslint
npm update babel-eslint

[MartinX3]

Here it happened because I upgraded babel-eslint 10.0.3 → 10.1.0

[zigaio]

I had 2 projects with the same setup. Only difference being they used different versions of the packages. After spending 3 days debugging this same issue I looked through my package.json and package-lock.json file, spotting I used @babel/core 7.8.7 (in the project I got this error) in one and 7.7.5 in the other (where I don't have the error.)

Going through all the comments here and on the other issues talking about installing @babel/parser 7.7.5 and setting it in "resolution" gave me a hint to check my package-lock.json.

@babel/core references @babel/parser: 7.8.7 in its "requires" prop in package-lock.

By downgrading to @babel/core 7.7.5 again resolved it for me; because this version has @babel/parser 7.7.5 in its "requires" prop.

If you have installed @babel/parser 7.7.5 in your project and set "resolution" and it still doesn't work, try downgrading like I did.

[nelson6e65]

Triggers the error:

    const {
        id = uniqueId(`${CSS_CLASS}_i`),
        ...otherAttributes
    } = props

Using a pre-class, eslint does not complains anymore:

    const NO_ESLINT_COMPLAIN = `${CSS_CLASS}_i`

    const {
        id = uniqueId(NO_ESLINT_COMPLAIN),
        ...otherAttributes
    } = props

[linlinyang]

Same issue and downgrade babel-eslint to 8.2.6 replace of the newest(^10.0.2)

[vramana]

Upgrade to babel-eslint: ^11.0.0-beta.2 That fixes the issue now.

[EdwinBetanc0urt]

Upgrade to babel-eslint: ^11.0.0-beta.2 That fixes the issue now.

Greetings @vramana, i delete node_modules folder, package-lock.json and yarn.lock files, run npm cache clean -f, and update to version babel-eslint: ^ 11.0.0-beta.2 but it is not working it keeps giving error Cannot read property 'range' of null

[kaicataldo]

Thank you for the PR. Now that @babel/eslint-parser has been released, we are making this repository read-only. If this is a change you would still like to advocate for, please reopen this in the babel/babel monorepo.