Skip to content
This repository has been archived by the owner. It is now read-only.

TypeError: Cannot read property 'range' of null from template-curly-spacing #530

Closed
jasonblanchard opened this issue Oct 16, 2017 · 133 comments
Closed

Comments

@jasonblanchard
Copy link

@jasonblanchard jasonblanchard commented Oct 16, 2017

With this .eslintrc config:

{
  "root": true,
  "parser": "babel-eslint",
  "extends": [
    "eslint:recommended",
    "semistandard"
  ],
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "mocha": true,
    "node": true
  },
  "plugins": [
    "babel"
  ],
  "rules": {
    "arrow-parens": 0,
    "no-class-assign": 0,
    "space-before-function-paren": [2, "never"]
  }
}

And these dependencies:

  "dependencies": {
    "babel-runtime": "6.26.0",
  },
  "devDependencies": {
    "babel-cli": "6.26.0",
    "babel-core": "6.26.0",
    "babel-eslint": "8.0.1",
    "babel-plugin-transform-runtime": "6.23.0",
    "babel-preset-latest": "6.24.1",
    "babel-preset-stage-0": "6.24.1",
    "chai": "4.1.2",
    "dotenv": "4.0.0",
    "eslint": "4.9.0",
    "eslint-config-semistandard": "11.0.0",
    "eslint-config-standard": "10.2.1",
    "eslint-plugin-babel": "4.1.2",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-node": "5.2.0",
    "eslint-plugin-promise": "3.6.0",
    "eslint-plugin-standard": "3.0.1",
    "mocha": "4.0.1"
  }

this code snippet:

export default class SomeClass {
  someMethod(params) {
    const test = 'test';
    return `${test}`; // Seems to have to do with this template. Returning `test` directly is fine.
  }
}

results in this error when running eslint:

Cannot read property 'range' of null
TypeError: Cannot read property 'range' of null
    at SourceCode.getTokenBefore (/Users/jason/my-project/node_modules/eslint/lib/token-store/index.js:303:17)
    at checkSpacingBefore (/Users/jason/my-project/node_modules/eslint/lib/rules/template-curly-spacing.js:51:42)
    at TemplateElement (/Users/jason/my-project/node_modules/eslint/lib/rules/template-curly-spacing.js:116:17)
    at listeners.(anonymous function).forEach.listener (/Users/jason/my-project/node_modules/eslint/lib/util/safe-emitter.js:47:58)
    at Array.forEach (native)
    at Object.emit (/Users/jason/my-project/node_modules/eslint/lib/util/safe-emitter.js:47:38)
    at NodeEventGenerator.applySelector (/Users/jason/my-project/node_modules/eslint/lib/util/node-event-generator.js:251:26)
    at NodeEventGenerator.applySelectors (/Users/jason/my-project/node_modules/eslint/lib/util/node-event-generator.js:280:22)
    at NodeEventGenerator.enterNode (/Users/jason/my-project/node_modules/eslint/lib/util/node-event-generator.js:294:14)
    at CodePathAnalyzer.enterNode (/Users/jason/my-project/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:606:23)

If I remove "parser": "babel-eslint" the problem goes away, so I think it has to do with babel-eslint. The error also goes away if I pin babel-eslint to 7.2.3.

Happy to provide any other information if necessary!

@hzoo
Copy link
Member

@hzoo hzoo commented Nov 6, 2017

Weird.. 🤔 it works fine with just

  "dependencies": {
    "babel-eslint": "^8.0.1",
    "eslint": "^4.10.0"
  },

Also just FYI, babel-preset-latest has been deprecated?

Can you recreate a repo that produces this error (and with the minimal dependencies/config). I don't think the other eslint plugins/configs should matter.

Also can you try v8.0.2? Seems like npm/yarn aren't resolving beta versions correctly

@afc163
Copy link

@afc163 afc163 commented Dec 11, 2017

ant-design/ant-design@d1568c9

Locking to 8.0.1 seems to be ok.

@afc163
Copy link

@afc163 afc163 commented Dec 11, 2017

8.0.2 works fine too.

@afc163
Copy link

@afc163 afc163 commented Dec 26, 2017

@yesmeck
Copy link

@yesmeck yesmeck commented Dec 28, 2017

After a few hours digging, I found the root problem. There are multiple copies of @babel/types in our node_modules.

[1] % npm list @babel/types
├─┬ babel-eslint@8.1.2
│ ├─┬ @babel/traverse@7.0.0-beta.31
│ │ ├─┬ @babel/helper-function-name@7.0.0-beta.31
│ │ │ ├─┬ @babel/helper-get-function-arity@7.0.0-beta.31
│ │ │ │ └── @babel/types@7.0.0-beta.31
│ │ │ ├─┬ @babel/template@7.0.0-beta.31
│ │ │ │ └── @babel/types@7.0.0-beta.31
│ │ │ └── @babel/types@7.0.0-beta.31
│ │ └── @babel/types@7.0.0-beta.31
│ └── @babel/types@7.0.0-beta.31
└─┬ babel-plugin-import@1.6.3
  └─┬ @babel/helper-module-imports@7.0.0-beta.36
    └── @babel/types@7.0.0-beta.36

@babel/types@7.0.0-beta.36 is lifted to the root, so that babel-eslint and @babel/traverse both have a copy of @babel/types in their own node_modules. The monkey patch for MethodDefinition not effect the version of @babel/traverse's @babel/types

@yesmeck
Copy link

@yesmeck yesmeck commented Dec 28, 2017

babel-eslint should upgrade @babel-traverse to 7.0.0-beta.36 #550.

@hzoo Why not move babel-eslint to mono-repo?

@delch
Copy link

@delch delch commented Feb 6, 2018

how to fix this ? Anybody know ?

@yesmeck
Copy link

@yesmeck yesmeck commented Feb 6, 2018

@delch Install @babel/types@7.0.0-beta.36 as your project's dependent.

@JustFly1984
Copy link

@JustFly1984 JustFly1984 commented Feb 22, 2018

I have same issue. The most annoying thing is that it doesn't bubbles for old peaces of code with template literals, but only for fresh once. Can't figure out why. It does creeps me out a lot.

ERROR in ./src/components/common/input-combobox.js
Module build failed: TypeError: Cannot read property 'range' of null
    at SourceCode.getTokenBefore (/media/projects/sites/taximow-static/node_modules/eslint/lib/token-store/index.js:303:18)
    at checkSpacingBefore (/media/projects/sites/taximow-static/node_modules/eslint/lib/rules/template-curly-spacing.js:52:42)
    at TemplateElement (/media/projects/sites/taximow-static/node_modules/eslint/lib/rules/template-curly-spacing.js:117:17)
    at listeners.(anonymous function).forEach.listener (/media/projects/sites/taximow-static/node_modules/eslint/lib/util/safe-emitter.js:47:58)
    at Array.forEach (<anonymous>)
    at Object.emit (/media/projects/sites/taximow-static/node_modules/eslint/lib/util/safe-emitter.js:47:38)
    at NodeEventGenerator.applySelector (/media/projects/sites/taximow-static/node_modules/eslint/lib/util/node-event-generator.js:251:26)
    at NodeEventGenerator.applySelectors (/media/projects/sites/taximow-static/node_modules/eslint/lib/util/node-event-generator.js:280:22)
    at NodeEventGenerator.enterNode (/media/projects/sites/taximow-static/node_modules/eslint/lib/util/node-event-generator.js:294:14)
    at CodePathAnalyzer.enterNode (/media/projects/sites/taximow-static/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:608:23)
    at Traverser.enter [as _enter] (/media/projects/sites/taximow-static/node_modules/eslint/lib/linter.js:1006:32)
    at Traverser._traverse (/media/projects/sites/taximow-static/node_modules/eslint/lib/util/traverser.js:132:14)
    at Traverser._traverse (/media/projects/sites/taximow-static/node_modules/eslint/lib/util/traverser.js:144:34)
    at Traverser._traverse (/media/projects/sites/taximow-static/node_modules/eslint/lib/util/traverser.js:147:30)
    at Traverser._traverse (/media/projects/sites/taximow-static/node_modules/eslint/lib/util/traverser.js:147:30)
    at Traverser._traverse (/media/projects/sites/taximow-static/node_modules/es

@JustFly1984
Copy link

@JustFly1984 JustFly1984 commented Feb 22, 2018

ps I have "@babel/types": "7.0.0-beta.39" in my devDependencies

@darrenklein
Copy link

@darrenklein darrenklein commented Mar 5, 2018

In case anyone is in a similar situation - this problem occurred for me when I bumped my Node version from 6.11.1 to 8.9.4. I took two steps to resolve this -

  • As recommended by @jasonblanchard, I set my version of babel-eslint to 7.2.3
  • I also manually included @babel/types": "7.0.0-beta.40 in my deps as recommended by @yesmeck, though I'm not certain that this had any effect as it was not enough to resolve the problem on its own.

@arty-name
Copy link

@arty-name arty-name commented Mar 19, 2018

In my case upgrading to babel-eslint@8.2.2 has solved the problem.

@adamchenwei
Copy link

@adamchenwei adamchenwei commented Mar 24, 2018

@jasonblanchard confirmed pin pin babel-eslint to 7.2.3. solved the issue!

its good to resolve the issue since that means newer version of this plugin really is nobody using it.. lol

@JustFly1984
Copy link

@JustFly1984 JustFly1984 commented Mar 29, 2018

I've missed this error for a while, but today I had edited like 20 files using template literals, and I had this error again. Weirdest thing that error appeared in 10 of edited files, and there was no errors for other part of the files. All 20 files are React components, and all 20 fixes had similar pattern. I looked at babel-eslint version, and I had 8.2.2

I've downgraded it to 7.2.3 and errors disappeared.

@kkarkos
Copy link

@kkarkos kkarkos commented Apr 5, 2018

I tried all suggested fixes from above but I still get the error. The error came out of nowhere after switching branches and coming back to my initial branch. Nothing in package.json had changed. I just removed node_modules and re-installed all with yarn install. I also tried eslint 5.0.0.alpha and different babel-eslint versions. Frustrating, the error is:
[Error - 17:33:23] TypeError: Cannot read property 'range' of null at SourceCode.getTokenBefore (/Users/user/Documents/_Projects/project/node_modules/eslint/lib/token-store/index.js:303:17) at checkSpacingBefore (/Users/user/Documents/_Projects/project/node_modules/eslint/lib/rules/template-curly-spacing.js:52:42) at TemplateElement (/Users/user/Documents/_Projects/project/node_modules/eslint/lib/rules/template-curly-spacing.js:117:17) at listeners.(anonymous function).forEach.listener (/Users/user/Documents/_Projects/project/node_modules/eslint/lib/util/safe-emitter.js:47:58) at Array.forEach (native) at Object.emit (/Users/user/Documents/_Projects/project/node_modules/eslint/lib/util/safe-emitter.js:47:38) at NodeEventGenerator.applySelector (/Users/user/Documents/_Projects/project/node_modules/eslint/lib/util/node-event-generator.js:251:26) at NodeEventGenerator.applySelectors (/Users/user/Documents/_Projects/project/node_modules/eslint/lib/util/node-event-generator.js:280:22) at NodeEventGenerator.enterNode (/Users/user/Documents/_Projects/project/node_modules/eslint/lib/util/node-event-generator.js:294:14) at CodePathAnalyzer.enterNode (/Users/user/Documents/_Projects/project/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:608:23) at Traverser.enter [as _enter] (/Users/user/Documents/_Projects/project/node_modules/eslint/lib/linter.js:865:28)

I'm on node 9.5.0

@chhuang
Copy link

@chhuang chhuang commented Apr 5, 2018

Same error, if I remove the intent rule it's fine.

"rules": {
  "indent": [2, 2]
}

@matthew-dean
Copy link

@matthew-dean matthew-dean commented Apr 23, 2018

Why is babel-eslint 8.x picking a beta build of @babel/types in the first place? And a very specific, non-bug-fixable version?? https://github.com/babel/babel-eslint/blob/master/package.json#L16 Seems like downgrading to 7.2.3 is definitely a safer option, and downgrading fixed our Jenkins build.

@ryaninvents
Copy link

@ryaninvents ryaninvents commented May 1, 2018

I managed to fix this problem for myself; our company's internal ESLint config defined "parser": "babel-eslint", but that line also existed in each project's .eslintrc.

Removing the line "parser": "babel-eslint" from each project caused ESLint to rely on the version installed from our config, and fixed the issue. I know npm flattens the dependency tree, so I can't explain why this works; I'm just happy it does work.

@music2code
Copy link

@music2code music2code commented May 19, 2018

@ryaninvents Worked for me too. Thank you!

@miladmeidanshahi
Copy link

@miladmeidanshahi miladmeidanshahi commented Mar 4, 2020

fixed #815 (comment)

@TomasBarry
Copy link

@TomasBarry TomasBarry commented Mar 12, 2020

I have been able to resolve this issue by upgrading babel-eslint to 10.1.0.

D-Pow added a commit to D-Pow/react-app-boilerplate that referenced this issue Mar 13, 2020
babel-eslint has trouble parsing some files for random, unknown reasons (e.g. babel/babel-eslint#530 and babel/babel-eslint#799). The error given is `TypeError: Cannot read property 'range' of null` which comes from `OffsetStorage.setDesiredOffset` (eslintrc.rules.indent). Ignoring template literals fixes this.
vtm9 added a commit to hexlet-codebattle/codebattle that referenced this issue Mar 15, 2020
@KarmaBlackshaw
Copy link

@KarmaBlackshaw KarmaBlackshaw commented Mar 30, 2020

Still having it.

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'plugin:vue/recommended',
    'eslint:recommended',
    'standard'
  ],
  "parser": "vue-eslint-parser",
  parserOptions: {
    "parser": "babel-eslint",
      "sourceType": "module"
  },
  rules: {},
}

"devDependencies": {
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-plugin-router": "~4.2.0",
    "@vue/cli-plugin-unit-jest": "~4.2.0",
    "@vue/cli-plugin-vuex": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "@vue/eslint-config-standard": "^5.1.0",
    "@vue/test-utils": "1.0.0-beta.31",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "eslint": "6.8.0",
    "eslint-config-standard": "14.1.1",
    "eslint-plugin-import": "2.20.2",
    "eslint-plugin-node": "11.1.0",
    "eslint-plugin-promise": "4.2.1",
    "eslint-plugin-standard": "4.0.1",
    "eslint-plugin-vue": "6.2.2",
    "vue-eslint-parser": "7.0.0",
    "vue-template-compiler": "^2.5.17"
  }

@TomasBarry
Copy link

@TomasBarry TomasBarry commented Mar 30, 2020

@KarmaBlackshaw, have you tried #530 (comment)?

@KarmaBlackshaw
Copy link

@KarmaBlackshaw KarmaBlackshaw commented Mar 30, 2020

@TomasBarry yes, but to no avail.

@KarmaBlackshaw
Copy link

@KarmaBlackshaw KarmaBlackshaw commented Mar 30, 2020

I've run into these issues before with just the version of babel-eslint but now, I don't really know what to do. Changing babel-eslint version no longer works.

@KarmaBlackshaw
Copy link

@KarmaBlackshaw KarmaBlackshaw commented Mar 30, 2020

This only occurs on vue-router. Line 1 which is import Vue from 'vue'.

@ljharb
Copy link
Member

@ljharb ljharb commented Mar 30, 2020

You’re still using babel 6?

@KarmaBlackshaw
Copy link

@KarmaBlackshaw KarmaBlackshaw commented Mar 31, 2020

@ljharb, These are the only babels I'm only using.

+-- babel-core@7.0.0-bridge.0
+-- babel-eslint@10.1.0
+-- @vue/cli-plugin-babel@4.2.3

Perhaps, they need to be matched?

@ljharb
Copy link
Member

@ljharb ljharb commented Mar 31, 2020

babel-core bridge is only used to be able to use Babel 6, i thought.

@KarmaBlackshaw
Copy link

@KarmaBlackshaw KarmaBlackshaw commented Mar 31, 2020

I have updated it now to use the latest stable version which is 6.26.3. Still the same. I don't like turning off rules though, but for now, it seems that it is just appropriate. I believe this is just a hack.

indent: [
  'error', 2,
  { ignoredNodes: ['TemplateLiteral'] }
],
'template-curly-spacing': 'off'

@ljharb
Copy link
Member

@ljharb ljharb commented Mar 31, 2020

Right, Babel 7+ is at @babel/core.

@Irrelon
Copy link

@Irrelon Irrelon commented Jul 16, 2020

Downgrading to babel-eslint 8.x was the only way I was able to solve this after trying the other suggestions here.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.