Cannot read property 'range' of null #681
Comments
Also seeing similar error although we don't use decorators |
|
Experiencing similar issue here. For me the troublesome lines are the ones containing template literals. Commenting out those makes |
|
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. |
|
See: #530 |
|
I encountered similar problem, finally I found that it's because of existence of 2
So Would work. But won't work. @hzoo , I think here it's better to pass in the |
|
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 |
|
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": ["error", 2, {
"ignoredNodes": ["TemplateLiteral"]
}]Not sure how else I can be of help, except maybe reiterate @ljqx's suggestion of trying to normalize the |
… upgrade Fixes the following issue due to conflicting babel version: TypeError: Cannot read property 'range' of null See: babel/babel-eslint#681
|
I was having this issue myself using:
Using the following code words: However if I change it to use a template literal with a placeholder: 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: I upgraded babel-eslint's package.json to the following and it fixes the issue: Also @hzoo is there any reason as to why babel-eslint has babel-eslint as a devDependency? |
|
|
It looks like this problem has been resolved ! I changed this .babelrc to babel.config.js in my project {
"name": "element-seed",
"version": "1.3.1",
"description": "A Vue.js project",
"author": "ldwqh0 <[email protected]>",
"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' |
|
@ldwqh0 could you attach complete error log in output channel? In my case, I encountered similar log as @dsizomin |
|
This problem popped up for me after running Removing my eslint: v5.13.0 |
|
I fixed this issue by making sure I only have the one version of 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/[email protected]. I did this without adding the dependency to Then I ran the dedupe command to ensure I had no duplicates of You should then see that the npm list command shows a single |
It works. Thank you. |
…f null" It is deadly to mix "npm install" and yarn, we need to pick one or the other and stick with it. babel/babel-eslint#681 (comment)
…f null" It is deadly to mix "npm install" and yarn, we need to pick one or the other and stick with it. babel/babel-eslint#681 (comment)
…f null" It is deadly to mix "npm install" and yarn, we need to pick one or the other and stick with it. babel/babel-eslint#681 (comment)
…f null" It is deadly to mix "npm install" and yarn, we need to pick one or the other and stick with it. babel/babel-eslint#681 (comment)
…f null" It is deadly to mix "npm install" and yarn, we need to pick one or the other and stick with it. babel/babel-eslint#681 (comment)
…f null" It is deadly to mix "npm install" and yarn, we need to pick one or the other and stick with it. babel/babel-eslint#681 (comment)
|
For those of you running yarn, Running yarn-deduplicate and then re-installing your modules by running |
|
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 |
|
For any one reading this, here is how I solved this issue : "rules": {
"template-curly-spacing": "off",
"indent": [
"warn",
2,
{
"ignoredNodes": ["TemplateLiteral"],
"SwitchCase": 1
}
]
} |
|
Tried @elhaouari-mohammed 's suggestion. Unfortunately, did not help me. My error happens at build time, so ESLint does not seem to be involved. |
|
@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. |
|
I've noticed that the error message has changed for me. Instead of |
|
Both error messages are very generic. Multiple unrelated issues might lead to them. |
|
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: That piece of code is: function page (path) {
return () => import(/* webpackChunkName: '' */ `/resources/js/pages/${path}`).then(m => m.default || m);
}Simply commenting out the I tried wrapping the problematic block with 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 |
|
i'm using CRA ([email protected]), yarn and [email protected] 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.
|
|
same issue here with |
|
adding to the package.json would solve the issue for me Also run to clean all history of npm modules in your project and then reinstall them using |
|
Facing the same problem with below code: Following the @richardvanbergen suggestion above, removed the template string and instead used as below and the warning went away. Hope to see this fixed soon. |
I'm getting this error with
Adjusting both rules like this works: "rules": {
"indent": ["error", 4, { "ignoredNodes": ["TemplateLiteral"] }],
"template-curly-spacing" : "off"
}
I have just a single version of |
using webpack magic comment and template string. babel/babel-eslint#681
|
I believe (although not sure) I started getting this when updating from babel-eslint 10.0.3 to 10.1.0 |
and others
In my index.js
with the error
and I use Decorator before export like this
the error
How do I solve these two problems?
The text was updated successfully, but these errors were encountered: