【已解决】vue cli 安装 babel-eslint 后导致异步 import() 中的插值表达式 ${} 报错

[pdsuwwz]

问题描述

TypeError: Cannot read property 'range' of null

版本

@vue/cli: 4.5.6
babel-eslint: 10.1.0

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    ecmaFeatures: {
      legacyDecorators: true
    },
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

[pdsuwwz]

问题已解决:

1. 首先将 babel-eslint 卸载
2. 再安装 @babel/core 和 @babel/eslint-parser

卸载 babel-eslint

npm uninstall babel-eslint

# or

yarn remove babel-eslint

安装 @babel/core 和 @babel/eslint-parser

npm install eslint @babel/core @babel/eslint-parser --save-dev
# or 
yarn add eslint @babel/core @babel/eslint-parser -D

完成 🎉

[pdsuwwz]

问题已解决:

1. 首先将 babel-eslint 卸载
2. 再安装 @babel/core 和 @babel/eslint-parser

卸载 babel-eslint

npm uninstall babel-eslint

# or

yarn remove babel-eslint

安装 @babel/core 和 @babel/eslint-parser

npm install eslint @babel/core @babel/eslint-parser --save-dev
# or 
yarn add eslint @babel/core @babel/eslint-parser -D

完成 🎉

补充下，.eslintrc.js 中的 parser 也要改成: parser: '@babel/eslint-parser'

参考链接： https://babeljs.io/blog/2020/07/13/the-state-of-babel-eslint