search

babel / babel-eslint

:tokyo_tower: A wrapper for Babel's parser used for ESLint (renamed to @babel/eslint-parser)
https://github.com/babel/babel/tree/main/eslint/babel-eslint-parser
MIT License
2.96k stars 208 forks source link

Cannot read property 'range' of null #681

Closed ldwqh0 closed 5 years ago

ldwqh0 commented 6 years ago

In my index.js

export module1  from './module1'
export module2 from './module2'

with the error

Cannot read property 'range' of null

and I use Decorator before export like this 


@Decorator
export default Class A {
 ...
}

the error 

Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead.

How do I solve these two problems?

craigbeck commented 6 years ago 
$ npx eslint .
Cannot read property 'range' of null
(node:44758) [ESLINT_LEGACY_OBJECT_REST_SPREAD] DeprecationWarning: The 'parserOptions.ecmaFeatures.experimentalObjectRestSpread' option is deprecated. Use 'parserOptions.ecmaVersion' instead. (found in "node_modules/eslint-config-airbnb-base/index.js")
> eslint . --cache --cache-file eslint-cache/eslintcache

Cannot read property 'range' of null
TypeError: Cannot read property 'range' of null
    at SourceCode.getTokenBefore (/Users/craigbeck/dev/premise-frontend-v3/node_modules/eslint/lib/token-store/index.js:303:18)
    at checkSpacingBefore (/Users/craigbeck/dev/premise-frontend-v3/node_modules/eslint/lib/rules/template-curly-spacing.js:52:42)
    at TemplateElement (/Users/craigbeck/dev/premise-frontend-v3/node_modules/eslint/lib/rules/template-curly-spacing.js:117:17)
    at listeners.(anonymous function).forEach.listener (/Users/craigbeck/dev/premise-frontend-v3/node_modules/eslint/lib/util/safe-emitter.js:45:58)
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/craigbeck/dev/premise-frontend-v3/node_modules/eslint/lib/util/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/Users/craigbeck/dev/premise-frontend-v3/node_modules/eslint/lib/util/node-event-generator.js:251:26)
    at NodeEventGenerator.applySelectors (/Users/craigbeck/dev/premise-frontend-v3/node_modules/eslint/lib/util/node-event-generator.js:280:22)
    at NodeEventGenerator.enterNode (/Users/craigbeck/dev/premise-frontend-v3/node_modules/eslint/lib/util/node-event-generator.js:294:14)
    at CodePathAnalyzer.enterNode (/Users/craigbeck/dev/premise-frontend-v3/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:632:23)

Also seeing similar error although we don't use decorators

dsizomin commented 6 years ago

Experiencing similar issue here.

TypeError: Cannot read property 'range' of null
    at OffsetStorage.setDesiredOffset (/Users/dsizomin/Projects/RateFamily/frontend/node_modules/eslint/lib/rules/indent.js:335:45)
    at TemplateLiteral.node.expressions.forEach (/Users/dsizomin/Projects/RateFamily/frontend/node_modules/eslint/lib/rules/indent.js:1341:29)
    at Array.forEach (<anonymous>)
    at Object.TemplateLiteral [as listener] (/Users/dsizomin/Projects/RateFamily/frontend/node_modules/eslint/lib/rules/indent.js:1333:34)
    at Program:exit.listenerCallQueue.filter.forEach.nodeInfo (/Users/dsizomin/Projects/RateFamily/frontend/node_modules/eslint/lib/rules/indent.js:1529:55)
    at Array.forEach (<anonymous>)
    at Program:exit (/Users/dsizomin/Projects/RateFamily/frontend/node_modules/eslint/lib/rules/indent.js:1529:26)
    at listeners.(anonymous function).forEach.listener (/Users/dsizomin/Projects/RateFamily/frontend/node_modules/eslint/lib/util/safe-emitter.js:45:58)
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/dsizomin/Projects/RateFamily/frontend/node_modules/eslint/lib/util/safe-emitter.js:45:38)

For me the troublesome lines are the ones containing template literals. Commenting out those makes eslint work.

krousseau-cs commented 6 years ago

I have the same issue. I'm not going to remove all template literals just for this upgrade since everything seems to still work with 8.2.6.

ZackKnopp commented 6 years ago

See: #530 What worked for me in .eslintrc:

// TODO: Remove when is https://github.com/babel/babel-eslint/issues/530 fixed
  rules : {
    "template-curly-spacing" : "off",
    indent : "off"
  }
ljqx commented 6 years ago

I encountered similar problem, finally I found that it's because of existence of 2 @babel/types.

babel-eslint changes data in @babel/types and assumes @babel/traverse would consume it. But as npm/yarn may create different @babel/types to avoid conflict, the change on @babel/types may not take affect on @babel/traverse.

So

- node_modules
  - @babel
    - traverse
    - types
  - babel-eslint

Would work. But

- node_modules
  - @babel
    - traverse
      - node_modules
        - @babel
          - types
  - babel-eslint
    - node_modules
      - @babel
        - types

won't work.

@hzoo , I think here it's better to pass in the @babel/types instead of implicitly depending on same dependency which may not be true.

ldwqh0 commented 6 years ago

I have resolved this

Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead.

add this config in my .eslintrc.js file

  parserOptions: {
    ecmaFeatures: {
      legacyDecorators: true
    },
    parser: 'babel-eslint'
  }

but the "Cannot read property 'range' of null" error can not be resolved wait online

joepvl commented 5 years ago

FWIW, I'm getting the same error, with eslint 5.11.1 and npm 6.5.0. Switching to yarn fixes it, so from that perspective it seems like a dependency/determinicness issue. However, I want to keep using npm, and I also don't want to downgrade.

In my case at least the error is generated during handling of template literals within the indent rule. I can live with not checking indentation for template literals, so I've fixed it for now using the ignoredNodes option for the indent rule, roughly as follows:

"indent": ["error", 2, {
  "ignoredNodes": ["TemplateLiteral"]
}]

Not sure how else I can be of help, except maybe reiterate @ljqx's suggestion of trying to normalize the @babel/types dep across babel and babel-eslint. I can't tell if npm is doing something wrong here or if yarn's more deterministic algorithm is hiding a flaw in the code.

aarongeorge commented 5 years ago

I was having this issue myself using:

Using the following code words:

const foo = 'bar';
console.log('We\'re going for drinks at the ' + foo);

However if I change it to use a template literal with a placeholder:

const foo = 'bar';
console.log(`We're going for drinks at the ${foo}`);

I get the error: Cannot read property 'range' of null.

It seems to be an issue with using template literals that contain a placeholder as using:

console.log(`We're going for drinks at the bar`);

I upgraded babel-eslint's package.json to the following and it fixes the issue:

{
  "name": "babel-eslint",
  "version": "10.0.1",
  "description": "Custom parser for ESLint",
  "main": "lib/index.js",
  "files": [
    "lib"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/babel/babel-eslint.git"
  },
  "dependencies": {
    "@babel/code-frame": "^7.0.0",
    "@babel/parser": "^7.0.0",
    "@babel/traverse": "^7.0.0",
    "@babel/types": "^7.0.0",
    "eslint-scope": "4.0.0",
    "eslint-visitor-keys": "^1.0.0"
  },
  "scripts": {
    "test": "npm run lint && npm run test-only",
    "test-only": "mocha && mocha --require test/fixtures/preprocess-to-patch.js",
    "lint": "eslint lib test",
    "fix": "eslint lib test --fix",
    "precommit": "lint-staged",
    "preversion": "npm test",
    "changelog": "git log `git describe --tags --abbrev=0`..HEAD --pretty=format:' * %s (%an)' | grep -v 'Merge pull request'"
  },
  "author": "Sebastian McKenzie <sebmck@gmail.com>",
  "license": "MIT",
  "engines": {
    "node": ">=6"
  },
  "bugs": {
    "url": "https://github.com/babel/babel-eslint/issues"
  },
  "homepage": "https://github.com/babel/babel-eslint",
  "peerDependencies": {
    "eslint": ">= 4.12.1"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "dedent": "^0.7.0",
    "eslint": "^5.6.0",
    "eslint-config-babel": "^8.0.2",
    "eslint-plugin-flowtype": "^3.2.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-prettier": "^3.0.1",
    "espree": "^5.0.0",
    "husky": "^1.0.0-rc.13",
    "lint-staged": "^8.1.0",
    "mocha": "^5.0.1",
    "prettier": "^1.4.4"
  },
  "lint-staged": {
    "*.js": [
      "eslint --format=codeframe --fix",
      "git add"
    ]
  }
}

Also @hzoo is there any reason as to why babel-eslint has babel-eslint as a devDependency?

lizuncong commented 5 years ago

I have the same issue. I'm not going to remove all template literals just for this upgrade since everything seems to still work with 8.2.6. Have you resolved this question

ldwqh0 commented 5 years ago

It looks like this problem has been resolved !

I changed this .babelrc to babel.config.js in my project package.json

{
  "name": "element-seed",
  "version": "1.3.1",
  "description": "A Vue.js project",
  "author": "ldwqh0 <ldwqh0@outlook.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    "ts-compile": "tsc",
    "fix": "eslint --fix --ext .js,.vue src"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "animate.css": "^3.7.0",
    "animejs": "^2.2.0",
    "axios": "^0.18.0",
    "echarts": "^4.2.0-rc.2",
    "echarts-wordcloud": "^1.1.3",
    "element-datatables": "^0.2.3",
    "element-ui": "^2.4.7",
    "lodash": "^4.17.11",
    "qrcodejs2": "^0.0.2",
    "qs": "^6.5.1",
    "resize-detector": "^0.1.9",
    "vue": "^2.5.20",
    "vue-property-decorator": "^7.1.0",
    "vue-router": "^3.0.1",
    "vue2-uploader": "0.1.8",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.0",
    "wangeditor": "^3.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.2.0",
    "@babel/plugin-proposal-class-properties": "^7.2.1",
    "@babel/plugin-proposal-decorators": "^7.2.0",
    "@babel/plugin-proposal-do-expressions": "^7.2.0",
    "@babel/plugin-proposal-export-default-from": "^7.2.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
    "@babel/plugin-proposal-function-sent": "^7.2.0",
    "@babel/plugin-proposal-json-strings": "^7.2.0",
    "@babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.2.0",
    "@babel/plugin-proposal-numeric-separator": "^7.2.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
    "@babel/plugin-proposal-pipeline-operator": "^7.2.0",
    "@babel/plugin-proposal-throw-expressions": "^7.2.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-syntax-import-meta": "^7.2.0",
    "@babel/plugin-syntax-jsx": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.0",
    "@babel/runtime": "^7.2.0",
    "@types/node": "^10.12.12",
    "ajv": "^6.6.1",
    "autoprefixer": "^9.4.2",
    "babel-eslint": "^10.0.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-component": "^1.1.1",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.5.1",
    "css-loader": "^2.0.0",
    "eslint": "^5.10.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-friendly-formatter": "^4.0.0",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-html": "^5.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^8.0.0",
    "eslint-plugin-promise": "^4.0.0",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.0.0",
    "file-loader": "^3.0.0",
    "friendly-errors-webpack-plugin": "^1.6.0",
    "html-webpack-plugin": "^3.1.0",
    "less": "^3.8.0",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.5.0",
    "mockjs": "^1.0.1-beta3",
    "node-notifier": "^5.1.0",
    "node-xlsx": "^0.12.1",
    "optimize-css-assets-webpack-plugin": "^5.0.0",
    "ora": "^3.0.0",
    "portfinder": "^1.0.20",
    "postcss-import": "^12.0.0",
    "postcss-loader": "^3.0.0",
    "postcss-url": "^8.0.0",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.8.0",
    "ts-node": "^7.0.1",
    "typescript": "^3.2.1",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "^1.0.0",
    "vue-loader": "^15.4.0",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.20",
    "webpack": "^4.27.1",
    "webpack-bundle-analyzer": "^3.0.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.0",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

babel.config.js

module.exports = function (api) {
  api.cache(true)
  return {
    presets: [
      [
        '@babel/preset-env',
        {
          'modules': false,
          'targets': {
            'browsers': [
              '> 1%',
              'last 2 versions',
              'not ie <= 8'
            ]
          },
          'useBuiltIns': 'entry'
        }
      ]
    ],
    plugins: [
      [
        'component',
        {
          'libraryName': 'element-ui',
          'styleLibraryName': 'theme-chalk'
        }
      ],
      // 在babel转码的时候，有些语法会转换为一些特殊函数，这个插件提供了这些公共函数，用以解决打包之后的体积
      '@babel/plugin-transform-runtime',
      // 这个插件编译@import('')语法
      '@babel/plugin-syntax-dynamic-import',
      // 处理对象的解构语法，即{...a}模式
      [
        '@babel/plugin-proposal-object-rest-spread',
        {
          'loose': true
        }
      ],
      // 处理decorators语法
      [
        '@babel/plugin-proposal-decorators',
        {
          // export写在@decorators的前面
          // @decorator
          // export class Foo {}
          // 否则就是 export @decorator class Bar {} 这种模式
          // 'decoratorsBeforeExport': true,

          // 必须设置legacy为true,不然vue报错,编译能通过，但会发生运行时错误，提示组件属性无效
          // 项目使用了vue-property-decorator模式导致的
          'legacy': true
        }
      ],
      // 处理类的属性语法
      [
        '@babel/plugin-proposal-class-properties',
        {
          // 使用哪种方式定义对象的属性，如果loose为true,使用
          // var Bork = function Bork() {
          //   babelHelpers.classCallCheck(this, Bork);
          //   this.x = 'bar';
          //   this.y = void 0;
          // };
          // 的模式增加属性，
          // 否则使用Object.defineProperty的模式附加属性
          // 项目使用了vue-property-decorator模式，必须使用loose模式
          'loose': true
        }
      ],
      // 处理 export module from 'xxx'语法
      '@babel/plugin-proposal-export-default-from',
      // 处理 export * as ns from 'mod' 语法
      '@babel/plugin-proposal-export-namespace-from',
      // 处理带分隔符的数字
      '@babel/plugin-proposal-numeric-separator'
    ]
  }
}

There is no error in my project when use export module from '../file' this is my test project

l443018 commented 5 years ago

@ldwqh0 could you attach complete error log in output channel?

In my case, I encountered similar log as @dsizomin I solved it by remove yarn.lock, node_modules and run yarn install again (need to restart VS code): https://github.com/babel/babel-eslint/issues/530#issuecomment-438635426

[Error - 11:55:33 AM] TypeError: Cannot read property 'range' of null
    at OffsetStorage.setDesiredOffset (/home/laura/Documents/project/kid-guard-api/node_modules/eslint/lib/rules/indent.js:335:45)
    at TemplateLiteral.node.expressions.forEach (/home/laura/Documents/project/kid-guard-api/node_modules/eslint/lib/rules/indent.js:1335:29)
    at Array.forEach (<anonymous>)
    at Object.TemplateLiteral [as listener] (/home/laura/Documents/project/kid-guard-api/node_modules/eslint/lib/rules/indent.js:1327:34)
    at Program:exit.listenerCallQueue.filter.forEach.nodeInfo (/home/laura/Documents/project/kid-guard-api/node_modules/eslint/lib/rules/indent.js:1537:55)
    at Array.forEach (<anonymous>)
    at Program:exit (/home/laura/Documents/project/kid-guard-api/node_modules/eslint/lib/rules/indent.js:1537:26)
    at listeners.(anonymous function).forEach.listener (/home/laura/Documents/project/kid-guard-api/node_modules/eslint/lib/util/safe-emitter.js:45:58)
    at Array.forEach (<anonymous>)
    at Object.emit (/home/laura/Documents/project/kid-guard-api/node_modules/eslint/lib/util/safe-emitter.js:45:38)
dallashall-procore commented 5 years ago

This problem popped up for me after running npm audit fix to clear some npm vulnerability warnings, which bumped my version of eslint from v5.8.0 to v5.13.0

Removing my package-lock.json and node_modules folder and running npm install worked to resolve this in my case.

eslint: v5.13.0 babel-eslint: v10.0.1

aramk commented 5 years ago

I fixed this issue by making sure I only have the one version of @babel/types:

npm list @babel/types

I targeted version 7.3.4 and some packages were using the newer 7.4.4. For those packages I reverted to an older version which used @babel/types@7.3.4. I did this without adding the dependency to package.json. An npm install is sufficient to update the package-lock.json.

Then I ran the dedupe command to ensure I had no duplicates of @babel/types, since having multiple copies of the same version will still cause issues.

npm dedupe @babel/types

You should then see that the npm list command shows a single @babel/types without "dedupe" and all others with it, indicating they're references. After this the linter ran just fine.

minhna commented 5 years ago

Removing my package-lock.json and node_modules folder and running npm install worked to resolve this in my case.

It works. Thank you.

wojtekmaj commented 5 years ago

For those of you running yarn, Running yarn-deduplicate and then re-installing your modules by running yarn will fix the issue.

wichopy commented 5 years ago

I wish we could push top voted answers to the top. THE accepted answer should be to dedupe and reinstall. In my case, I just deleted package-lock.json and reinstalled

I ran into this while upgrading from the deprecation of @babel-polyfill

yhls7 commented 5 years ago

@aramk I have been troubled for a few hours. Thanks a lot. It works for me.

houchaowei commented 5 years ago

See: #530 What worked for me in .eslintrc:

// TODO: Remove when is https://github.com/babel/babel-eslint/issues/530 fixed
  rules : {
    "template-curly-spacing" : "off",
    indent : "off"
  }

it worked for me! thx :)

sdemjanenko commented 4 years ago

dedupe worked for me. I unfortunately didn't track the diff to the yarn.lock file. If we knew what the diff was we could update the dependency range for the module that is being required which would make running dedupe unnecessary.

raspy8766 commented 4 years ago

If you're using yarn, you can add a resolutions field in your package.json to force yarn to resolve to a single version for that package: 

  "resolutions": {
    "@babel/types": "7.7.2"
  },

With that in there you can run yarn install and remove the resolutions field afterwards (since you can install from the yarn.lock file going forward).

1um commented 4 years ago

Thanks, dedupe AND reinstall worked for me!

npm dedupe @babel/types
rm -rf node_modules package-lock.json
npm install
hyalen commented 4 years ago

See: #530 What worked for me in .eslintrc:

// TODO: Remove when is https://github.com/babel/babel-eslint/issues/530 fixed
  rules : {
    "template-curly-spacing" : "off",
    indent : "off"
  }

This solution worked for me. Thanks!

lolmaus commented 4 years ago

yarn upgrade resolved this issue for me.

ligne13 commented 4 years ago

This problem popped up for me after running npm audit fix to clear some npm vulnerability warnings, which bumped my version of eslint from v5.8.0 to v5.13.0

Removing my package-lock.json and node_modules folder and running npm install worked to resolve this in my case.

eslint: v5.13.0 babel-eslint: v10.0.1

This fixed the issue

bernardodomingues-hotmart commented 4 years ago

This issue keeps happening to me. Tried everything above (npm dedupe, removing package-lock and node_modules, etc). The only solution that works for me is freezing the @babel/parser version to 7.7.5. Any newer version breaks eslint with the same error.

eslint: v6.8.0 babel-eslint: 10.0.3

SterlingVix commented 4 years ago

For anyone coming back to this issue: @raspy8766 's solution of adding a resolution to my package.json worked for me. If you're facing this issue, this should be your first attempt to fix it, IMO.

In our repo we use yarn. After updating deps and following several ideas here (with no progress), I looked for the versions of @babel/types using npm list @babel/types. I standardized resolutions on v7.6.1:

"resolutions": {
  "@babel/types": "7.6.1",
  ...
},

This is the result of npm list @babel/types before adding the resolutions entry:

npm list @babel/types
+-- @babel/core@7.6.2
| +-- @babel/generator@7.6.2
| | `-- @babel/types@7.6.1  deduped
| +-- @babel/helpers@7.6.2
| | `-- @babel/types@7.6.1  deduped
| +-- @babel/template@7.6.0
| | `-- @babel/types@7.6.1  deduped
| +-- @babel/traverse@7.6.2
| | +-- @babel/helper-function-name@7.1.0
| | | `-- @babel/types@7.6.1  deduped
| | +-- @babel/helper-split-export-declaration@7.4.4
| | | `-- @babel/types@7.6.1  deduped
| | `-- @babel/types@7.6.1  deduped
| `-- @babel/types@7.6.1 
+-- @babel/plugin-proposal-class-properties@7.5.5
| `-- @babel/helper-create-class-features-plugin@7.5.5
|   +-- @babel/helper-member-expression-to-functions@7.5.5
|   | `-- @babel/types@7.6.1  deduped
|   +-- @babel/helper-optimise-call-expression@7.0.0
|   | `-- @babel/types@7.6.1  deduped
|   `-- @babel/helper-replace-supers@7.5.5
|     `-- @babel/types@7.6.1  deduped
+-- @babel/preset-env@7.6.2
| +-- @babel/helper-module-imports@7.0.0
| | `-- @babel/types@7.6.1  deduped
| +-- @babel/plugin-proposal-async-generator-functions@7.2.0
| | `-- @babel/helper-remap-async-to-generator@7.1.0
| |   +-- @babel/helper-wrap-function@7.2.0
| |   | `-- @babel/types@7.6.1  deduped
| |   `-- @babel/types@7.6.1  deduped
| +-- @babel/plugin-transform-classes@7.5.5
| | +-- @babel/helper-annotate-as-pure@7.0.0
| | | `-- @babel/types@7.6.1  deduped
| | `-- @babel/helper-define-map@7.5.5
| |   `-- @babel/types@7.6.1  deduped
| +-- @babel/plugin-transform-exponentiation-operator@7.2.0
| | `-- @babel/helper-builder-binary-assignment-operator-visitor@7.1.0
| |   +-- @babel/helper-explode-assignable-expression@7.1.0
| |   | `-- @babel/types@7.6.1  deduped
| |   `-- @babel/types@7.6.1  deduped
| +-- @babel/plugin-transform-modules-amd@7.5.0
| | `-- @babel/helper-module-transforms@7.5.5
| |   `-- @babel/types@7.6.1  deduped
| +-- @babel/plugin-transform-modules-commonjs@7.6.0
| | `-- @babel/helper-simple-access@7.1.0
| |   `-- @babel/types@7.6.1  deduped
| +-- @babel/plugin-transform-modules-systemjs@7.5.0
| | `-- @babel/helper-hoist-variables@7.4.4
| |   `-- @babel/types@7.6.1  deduped
| +-- @babel/plugin-transform-parameters@7.4.4
| | +-- @babel/helper-call-delegate@7.4.4
| | | `-- @babel/types@7.6.1  deduped
| | `-- @babel/helper-get-function-arity@7.0.0
| |   `-- @babel/types@7.6.1  deduped
| `-- @babel/types@7.6.1  deduped
+-- @babel/preset-react@7.0.0
| `-- @babel/plugin-transform-react-jsx@7.3.0
|   `-- @babel/helper-builder-react-jsx@7.3.0
|     `-- @babel/types@7.5.5 
+-- babel-eslint@10.0.3
| +-- @babel/traverse@7.1.4
| | +-- @babel/generator@7.1.3
| | | `-- @babel/types@7.1.3 
| | +-- @babel/helper-split-export-declaration@7.0.0
| | | `-- @babel/types@7.6.1  deduped
| | `-- @babel/types@7.1.3 
| `-- @babel/types@7.6.1  deduped
`-- regenerator@0.14.2
  `-- @babel/types@7.6.1  deduped
antoniandre commented 4 years ago

Hi everybody, This is still happening for me with the very latest version:

    "@vue/cli-plugin-babel": "^4.2.3",
    "@vue/cli-plugin-eslint": "^4.2.3",
    "@vue/cli-plugin-router": "^4.2.3",
    "@vue/cli-service": "^4.2.3",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "core-js": "^3.6.4",
    "eslint": "^6.8.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-vue": "^6.2.1",

image

The compiling fails on this line, because of the template literal:

import(/* webpackInclude: /\.json$/, webpackChunkName: "i18n/[request]" */ `./i18n/${locale}`)

Probably a month ago when I faced it I could fix it with: https://github.com/babel/babel-eslint/issues/681#issuecomment-464163266, now the error is back after upgrade and the trick does not work anymore.

As @joepvl mentioned I could disable template literal checking with:

"indent": ["error", 2, {
  "ignoredNodes": ["TemplateLiteral"]
}]

But I don't think it is a solution. Am I the only one left having this issue?

antoniandre commented 4 years ago

It seems to come from the package babel-eslint version 10.1.0 and package vue/cli-plugin-eslint version 4.2.3.

I have updated all the rest and I can build, as long as I stay with babel-eslint version 10.0.3 and vue/cli-plugin-eslint version 4.2.2.

"@vue/cli-plugin-babel": "^4.2.3",
"@vue/cli-plugin-eslint": "^4.2.2",
"@vue/cli-plugin-router": "^4.2.3",
"@vue/cli-service": "^4.2.3",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.0.3",
"core-js": "^3.6.4",
"eslint": "^6.8.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2",
theKashey commented 4 years ago

One of possible solutions - delete any information about @babel/* from package/yarn.lock and reinstall. In case of yarn you might try yarn-deduplicate

richardvanbergen commented 4 years ago

This error can also be triggered by using backticks in import statements. For me the issue was in the following:

import(`intersection-observer`)

I've encountered similar issues with template literals and imports before so I changed it to a single quote and it worked!

simonc commented 4 years ago

It doesn't seem to be limited to import statements.

After updating my dependencies the @babel/types entry was changed this way


-"@babel/types@^7.1.6", "@babel/types@^7.3.2", "@babel/types@^7.3.4", "@babel/types@^7.4.4", "@babel/types@^7.7.0", "@babel/types@^7.7.2", "@babel/types@^7.8.3", "@babel/types@^7
+"@babel/types@^7.1.6", "@babel/types@^7.3.2", "@babel/types@^7.3.4", "@babel/types@^7.4.4", "@babel/types@^7.8.3", "@babel/types@^7.8.6", "@babel/types@^7.9.0", "@babel/types@^7
+  version "7.9.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.5.tgz#89231f82915a8a566a703b3b20133f73da6b9444"
+  integrity sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.9.5"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
+"@babel/types@^7.7.0", "@babel/types@^7.7.2":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.0.tgz#00b064c3df83ad32b2dbf5ff07312b15c7f1efb5"
   integrity sha512-BS9JKfXkzzJl8RluW4JGknzpiUV7ZrvTayM6yfqLTVBEnFtyowVIOu6rqxRd5cVO6yGoWf4T8u8dgK9oB+GCng==

And now eslint breaks on a file because of this line:

headers.Authorization = `Bearer ${this.session.data.authenticated.auth_token}`;
NicholasIoanJones commented 4 years ago

This is really frustrating. Appeared out of nowhere. Solution for me was to delete node_modules and yarn.lock and rerun yarn Hope it helps somebody else

mhdcodes commented 4 years ago

For any one reading this, here is how I solved this issue : I added the following snippet to my .eslintrc under the rules directive : 

  "rules": {
    "template-curly-spacing": "off",
    "indent": [
      "warn",
      2,
      {
        "ignoredNodes": ["TemplateLiteral"],
        "SwitchCase": 1
      }
    ]
}
lolmaus commented 4 years ago

Tried @elhaouari-mohammed 's suggestion. Unfortunately, did not help me.

My error happens at build time, so ESLint does not seem to be involved.

mhdcodes commented 4 years ago

@lolmaus Actually for me it's the gitlab pipelines that fails because of eslint, everything works on local environment and on deploy server, so it's really weird , as @NicholasIoanJones said : Appeared out of nowhere.

lolmaus commented 4 years ago

I've noticed that the error message has changed for me.

Instead of Cannot read property 'range' of null it's now saying Debug failure.

lolmaus commented 4 years ago

Both error messages are very generic.

Multiple unrelated issues might lead to them.

agm1984 commented 4 years ago

I started reproducing this earlier today while pasting code into my project. It seemed like ES Lint got overwhelmed by hundreds of infractions.

At the moment, I am seeing this:

[Info  - 10:31:45 PM] Cannot read property 'range' of null Occurred while linting .../resources/js/router/routes.js:2
[Info  - 10:31:46 PM] Cannot read property 'range' of null Occurred while linting .../resources/js/router/routes.js:2
[Info  - 10:31:47 PM] Cannot read property 'range' of null Occurred while linting .../resources/js/router/routes.js:2

That piece of code is:

function page (path) {
    return () => import(/* webpackChunkName: '' */ `/resources/js/pages/${path}`).then(m => m.default || m);
}

Simply commenting out the import keyword fixes it.

I tried wrapping the problematic block with /* eslint-disable */ and /* eslint-enable */, but the dynamic import keyword's appearance breaks the engine.

I changed the code to concatenation:

function page(path) {
    return () => import(/* webpackChunkName: '' */ '/resources/js/pages/' + path).then(m => m.default || m); // eslint-disable-line prefer-template
}

I've never seen this error before from "just template literals", so if I had anything to contribute, it would be that the import keyword is related. When I remove that keyword but keep the template literal, it un-breaks ES Lint.

packetstracer commented 4 years ago

i'm using CRA (react-scripts@3.4.1), yarn and react-app-rewired@2.1.6 and this issue happens to me only transpiling the tests (yarn test) with import sentences using template literals such as this one:

import(`${path}`)

Neither of the commented solutions worked for me but using the patch of disabling the corresponding eslint rules. To me this is not a valid solution, but by the moment will use it.

See: #530 What worked for me in .eslintrc:

// TODO: Remove when is https://github.com/babel/babel-eslint/issues/530 fixed
  rules : {
    "template-curly-spacing" : "off",
    indent : "off"
  }

This solution worked for me. Thanks!

cdll commented 4 years ago

same issue here with "babel-eslint": "^10.0.1" in @vue/cli.

paschalidi commented 4 years ago

adding to the package.json would solve the issue for me

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

Also run 

git clean -fdx

to clean all history of npm modules in your project and then reinstall them using 

npm i or yarn
KrishnaPG commented 4 years ago

Facing the same problem with below code:

return import(/* webpackChunkName: "lang-[request]" */ `./lang/${lang}`)

Following the @richardvanbergen suggestion above, removed the template string and instead used as below and the warning went away. 

return import(/* webpackChunkName: "lang-[request]" */ "./lang/"+lang)

Hope to see this fixed soon.

romulof commented 4 years ago

@ljqx:

I encountered similar problem, finally I found that it's because of existence of 2 @babel/types.

babel-eslint changes data in @babel/types and assumes @babel/traverse would consume it. But as npm/yarn may create different @babel/types to avoid conflict, the change on @babel/types may not take affect on @babel/traverse.

So

- node_modules
  - @babel
    - traverse
    - types
  - babel-eslint

Would work. But

- node_modules
  - @babel
    - traverse
      - node_modules
        - @babel
          - types
  - babel-eslint
    - node_modules
      - @babel
        - types

won't work.

@hzoo , I think here it's better to pass in the @babel/types instead of implicitly depending on same dependency which may not be true.

I'm getting this error with template-curly-spacing and indent rules with this node_modules layout:

Adjusting both rules like this works:

"rules": {
    "indent": ["error", 4, { "ignoredNodes": ["TemplateLiteral"] }],
    "template-curly-spacing" : "off"
}

@aramk:

I fixed this issue by making sure I only have the one version of @babel/types:

npm list @babel/types

I targeted version 7.3.4 and some packages were using the newer 7.4.4. For those packages I reverted to an older version which used @babel/types@7.3.4. I did this without adding the dependency to package.json. An npm install is sufficient to update the package-lock.json.

Then I ran the dedupe command to ensure I had no duplicates of @babel/types, since having multiple copies of the same version will still cause issues.

npm dedupe @babel/types

You should then see that the npm list command shows a single @babel/types without "dedupe" and all others with it, indicating they're references. After this the linter ran just fine.

I have just a single version of @babel/types:

$ npm list @babel/types
project /path/to/project
├─┬ @babel/core@7.10.1
│ ├─┬ @babel/generator@7.10.1
│ │ └── @babel/types@7.10.1  deduped
│ ├─┬ @babel/helper-module-transforms@7.10.1
│ │ ├─┬ @babel/helper-replace-supers@7.10.1
│ │ │ ├─┬ @babel/helper-member-expression-to-functions@7.10.1
│ │ │ │ └── @babel/types@7.10.1  deduped
│ │ │ └── @babel/types@7.10.1  deduped
│ │ ├─┬ @babel/helper-simple-access@7.10.1
│ │ │ └── @babel/types@7.10.1  deduped
│ │ ├─┬ @babel/helper-split-export-declaration@7.10.1
│ │ │ └── @babel/types@7.10.1  deduped
│ │ └── @babel/types@7.10.1  deduped
│ ├─┬ @babel/helpers@7.10.1
│ │ └── @babel/types@7.10.1  deduped
│ ├─┬ @babel/template@7.10.1
│ │ └── @babel/types@7.10.1  deduped
│ ├─┬ @babel/traverse@7.10.1
│ │ ├─┬ @babel/helper-function-name@7.10.1
│ │ │ └── @babel/types@7.10.1  deduped
│ │ └── @babel/types@7.10.1  deduped
│ └── @babel/types@7.10.1 
├─┬ @babel/plugin-transform-runtime@7.10.1
│ └─┬ @babel/helper-module-imports@7.10.1
│   └── @babel/types@7.10.1  deduped
├─┬ @babel/preset-env@7.10.1
│ ├─┬ @babel/plugin-proposal-async-generator-functions@7.10.1
│ │ └─┬ @babel/helper-remap-async-to-generator@7.10.1
│ │   ├─┬ @babel/helper-wrap-function@7.10.1
│ │   │ └── @babel/types@7.10.1  deduped
│ │   └── @babel/types@7.10.1  deduped
│ ├─┬ @babel/plugin-transform-classes@7.10.1
│ │ ├─┬ @babel/helper-annotate-as-pure@7.10.1
│ │ │ └── @babel/types@7.10.1  deduped
│ │ ├─┬ @babel/helper-define-map@7.10.1
│ │ │ └── @babel/types@7.10.1  deduped
│ │ └─┬ @babel/helper-optimise-call-expression@7.10.1
│ │   └── @babel/types@7.10.1  deduped
│ ├─┬ @babel/plugin-transform-exponentiation-operator@7.10.1
│ │ └─┬ @babel/helper-builder-binary-assignment-operator-visitor@7.10.1
│ │   ├─┬ @babel/helper-explode-assignable-expression@7.10.1
│ │   │ └── @babel/types@7.10.1  deduped
│ │   └── @babel/types@7.10.1  deduped
│ ├─┬ @babel/plugin-transform-modules-systemjs@7.10.1
│ │ └─┬ @babel/helper-hoist-variables@7.10.1
│ │   └── @babel/types@7.10.1  deduped
│ ├─┬ @babel/plugin-transform-parameters@7.10.1
│ │ └─┬ @babel/helper-get-function-arity@7.10.1
│ │   └── @babel/types@7.10.1  deduped
│ ├─┬ @babel/preset-modules@0.1.3
│ │ └── @babel/types@7.10.1  deduped
│ └── @babel/types@7.10.1  deduped
├─┬ babel-eslint@10.1.0
│ └── @babel/types@7.10.1  deduped
├─┬ babel-jest@25.4.0
│ └─┬ @types/babel__core@7.1.7
│   ├── @babel/types@7.10.1  deduped
│   ├─┬ @types/babel__generator@7.6.1
│   │ └── @babel/types@7.10.1  deduped
│   ├─┬ @types/babel__template@7.0.2
│   │ └── @babel/types@7.10.1  deduped
│   └─┬ @types/babel__traverse@7.0.11
│     └── @babel/types@7.10.1  deduped
└─┬ jest@25.4.0
  └─┬ @jest/core@25.4.0
    └─┬ jest-snapshot@25.4.0
      └── @babel/types@7.10.1  deduped
Powersource commented 4 years ago

I believe (although not sure) I started getting this when updating from babel-eslint 10.0.3 to 10.1.0