eslint 错误无法读取 null 的属性“范围”
Posted
技术标签:
【中文标题】eslint 错误无法读取 null 的属性“范围”【英文标题】:eslint error cannot read property 'range' of null 【发布时间】:2018-07-01 16:39:24 【问题描述】:我这几天遇到同样的 eslint 问题。
团队中的每个人都有相同的 eslintrc 和安装版本的 eslint。他们的 eslint 工作正常,我的不行。
我已尝试重新启动计算机,删除 node_modules,删除我的用户下的任何内容(在主目录中)。没有任何效果。
问题:
./node_modules/.bin/eslint *.js*
1 ↵ 11504 10:19:47
Cannot read property 'range' of null
TypeError: Cannot read property 'range' of null
at SourceCode.getTokenBefore (/Users/jhill/gitRepo/sponsoroo/node_modules/eslint/lib/token-store/index.js:303:18)
at checkSpacingBefore (/Users/jhill/gitRepo/sponsoroo/node_modules/eslint/lib/rules/template-curly-spacing.js:52:42)
at TemplateElement (/Users/jhill/gitRepo/sponsoroo/node_modules/eslint/lib/rules/template-curly-spacing.js:117:17)
at listeners.(anonymous function).forEach.listener (/Users/jhill/gitRepo/sponsoroo/node_modules/eslint/lib/util/safe-emitter.js:47:58)
at Array.forEach (<anonymous>)
at Object.emit (/Users/jhill/gitRepo/sponsoroo/node_modules/eslint/lib/util/safe-emitter.js:47:38)
at NodeEventGenerator.applySelector (/Users/jhill/gitRepo/sponsoroo/node_modules/eslint/lib/util/node-event-generator.js:251:26)
at NodeEventGenerator.applySelectors (/Users/jhill/gitRepo/sponsoroo/node_modules/eslint/lib/util/node-event-generator.js:280:22)
at NodeEventGenerator.enterNode (/Users/jhill/gitRepo/sponsoroo/node_modules/eslint/lib/util/node-event-generator.js:294:14)
at CodePathAnalyzer.enterNode (/Users/jhill/gitRepo/sponsoroo/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:608:23)
详情
版本:
./node_modules/.bin/eslint --version
v4.16.0
.eslintrc
"extends": ["airbnb-base", "plugin:security/recommended"],
"rules":
"import/prefer-default-export": "off",
"no-console": "off",
"class-methods-use-this": "off",
"global-require": "off",
"consistent-return": "off",
"import/no-extraneous-dependencies": ["error", "devDependencies": true],
/* JSX */
"jsx-quotes": [2, "prefer-double"],
/* React */
"react/display-name": 1,
"react/jsx-boolean-value": 1,
"react/jsx-no-duplicate-props": 1,
"react/jsx-no-undef": 1,
"react/jsx-quotes": 0,
"react/jsx-sort-props": 0,
"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1,
"react/no-danger": 1,
"react/no-did-mount-set-state": 1,
"react/no-did-update-set-state": 1,
"react/no-multi-comp": 1,
"react/no-unknown-property": 1,
"react/prop-types": 1,
"react/react-in-jsx-scope": 1,
"react/self-closing-comp": 1,
"react/sort-comp": 1,
"react/wrap-multilines": 0,
/* Security */
"security/detect-non-literal-fs-filename": 2,
"security/detect-non-literal-regexp": 2,
"security/detect-unsafe-regex": 2,
"security/detect-buffer-noassert": 2,
"security/detect-child-process": 2,
"security/detect-disable-mustache-escape": 2,
"security/detect-eval-with-expression": 2,
"security/detect-no-csrf-before-method-override": 2,
"security/detect-non-literal-require": 2,
"security/detect-object-injection": 2,
"security/detect-possible-timing-attacks": 1,
"security/detect-pseudoRandomBytes": 2,
"no-unsafe-innerhtml/no-unsafe-innerhtml": 2
,
"parser": "babel-eslint",
"plugins": [
"babel",
"react",
"security",
"no-unsafe-innerhtml"
],
"env":
"jest": true,
"browser": true,
"es6": true,
"node": true
,
"settings":
"import/extensions":
"webpack":
"config": "./webpack.config.react.js"
另外,如果我从我的 .eslinrc 中删除“parser”:“babel-eslint”,问题/错误就会消失,但我的 eslint 不起作用。我正在使用 ES6 语法。
更新:
我的解决方案是使用 yarn 而不是 npm。问题暂时解决了。
【问题讨论】:
另见:github.com/babel/babel-eslint/issues/530 问题 530 有结果吗? 看起来将 babel-eslint 的版本修复为 7.2.3 或 8.0.1 是一种解决方法。 :(。非常讨厌。我正在做一个不喜欢过时模块的项目。这个工具的某些版本内置在我们的管道中github.com/Stono/hawkeye 【参考方案1】:扩展上述@SergeyP 的答案。
值得注意的是,如果您像我一样在按照他的说明操作后收到 Parsing error: No Babel config file detected
错误,则可能需要在 parserOptions
中将 requireConfigFile
标志设置为 false
。
module.exports =
parser: '@babel/eslint',
parserOptions:
requireConfigFile: false,
,
// ...snip...
这里有关于此问题的更多信息,对此进行了扩展。 https://github.com/babel/ember-cli-babel/issues/366
【讨论】:
【参考方案2】:我在 .eslintrc.js 文件中只添加了两条规则,它为我解决了。
rules :
"template-curly-spacing" : "off",
indent : "off"
【讨论】:
【参考方案3】:babel-eslint 已被弃用,取而代之的是 @babel/eslint-parser。 阅读here
以下是从 babel-eslint 升级到 @babel/eslint-parser 的步骤:
-
将 babel-eslint 替换为 @babel/eslint-parser:
npm
npm uninstall babel-eslint babel-eslint-plugin
npm install --save-dev @babel/eslint-parser @babel/eslint-plugin
纱线
yarn remove babel-eslint babel-eslint-plugin
yarn add --dev @babel/eslint-parser @babel/eslint-plugin
-
升级.eslintrc.js:
module.exports = --- parser: "babel-eslint", +++ parser: "@babel/eslint-parser" plugins: [ --- "babel" +++ "@babel ] ;
【讨论】:
【参考方案4】:对我来说,每个字符串文字(例如some text $someVariable
)都会显示一个警告,安装这两个包解决了我的问题:
npm i @babel/types @babel/traverse --save-dev
【讨论】:
【参考方案5】:正如@Vasan 提到的,特别是在issue 530, this was the comment 上,它帮助我解决了这个问题:
问题很可能是解析错误造成的。
import(`some_path/$variable`) // issue exists
修复
import("some_path" + variable) // issue fixed
【讨论】:
【参考方案6】:这些 .eslintrc 规则为我解决了这个问题:
rules :
"template-curly-spacing" : "off",
"indent": ["error", 2,
"ignoredNodes": ["TemplateLiteral"]
]
【讨论】:
不错。请记住在再次构建之前删除node_modules/.cache
不幸的是,这种方法违反了所有扩展规则。
"indent": ["error", 2, "ignoredNodes": ["TemplateLiteral"] ]
单独为我修复了它。不错的收获!这个崩溃不应该被认为是 eslint 中的一个错误吗?
@JaredTomaszewski 在babel-eslint
repo 中有关于这个问题的numerous issues。【参考方案7】:
通过运行将babel-eslint
的版本修复为7.2.3或8.0.1:
npm install --save-dev babel-eslint@7.2.3
或者:
npm install --save-dev babel-eslint@8.0.1
【讨论】:
我没有使用这种方法,因为我的babel-eslint
已经在 10.0.3以上是关于eslint 错误无法读取 null 的属性“范围”的主要内容,如果未能解决你的问题,请参考以下文章
未捕获的类型错误:无法读取 null 的属性(读取“添加”)
错误类型错误:无法在styles.css 中读取null 的属性(读取'classList')