解決 Cannot read property range of null 錯誤

解決 Cannot read property ‘range’ of null 錯誤

原因:.eslintrc.js 設置的 parser: ‘babel-eslint’

1
2
3
4
5
parserOptions: {
parser: 'babel-eslint',
ecmaVersion: 2017,
sourceType: 'module'
},

之所以報錯,原因來自於 Router import 元件採用動態引入的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
component: () => import(`@/views/${param}/5.index/home`) // 首頁

{
path: '/preferentialActivity',
name: 'preferentialActivity',
component: () =>
import(
/* webpackChunkName: "preferential-activity" */ `../views/${param}/2.preferentialActivity`
), // 優惠活動
meta: {
requiresAuth: true
}
}

網路上查到兩種解法,第一種是降低babel-eslint 的版本、第二種是改懶加載的寫法

先說第二種,改寫懶加載寫法

() => import 懶加載改成舊寫法便可以成功,但問題在於 resolve => require 這種寫法無法使用 Webpack 異步分組模塊 webpackChunkName,神奇的註解可以打包時,將相同元件打包成同一隻 js。由於專案日漸龐大,需要懶加載但又不希望分太多隻 js,所以這個方法雖然可以解決問題,但並不採用

1
2
// 改寫成 resolve => require
component: resolve => require([`@/views/${param}/5.index/home`], resolve)

看官方文件 babel-eslint,發現已不支援

1
2
babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
@babel/eslint-parser

無效方法

babel-eslint 升級版本 11.0.0-beta.2 -D

1
npm i [email protected]11.0.0-beta.2 -D

宣告無效

babel-eslint 升級版本 10.0.3

1
npm i [email protected]10.0.3 -D

宣告無效

安裝 @babel/plugin-syntax-dynamic-import

1
npm install --save-dev @babel/plugin-syntax-dynamic-import

宣告無效

安裝 @babel/plugin-syntax-dynamic-import

1
plugins: ["@babel/plugin-syntax-dynamic-import"]

宣告無效

###

1
npm install --save-dev @babel/eslint-parser @babel/eslint-plugin

Reference


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!