Parsing error: 'import' and 'export' may only appear at the top level

報錯

今天給項目裝上 eslint 后出現報錯 Parsing error: 'import' and 'export' may only appear at the top level.

復現

import "lib-flexible/flexible.js";
import userOptions from "@/assets/js/merge";
import { loadFiles } from "@/assets/js/tools";
import env from "@/constants/env";

window.userOptions = userOptions;

const assets = 123;

if (env === "dev") {
  import("@/assets/css/blog-common.min.css"); // 這一行import報錯
} else {
  loadFiles([
    {
      name: `${userOptions.theme.name}`,
      type: "js"
    }
  ]);
}

es6 模塊語法是允許這樣寫的, eslint 卻把它當成錯誤來處理, 如果如上頭部的幾個 import 寫在下面的話的確應該報此錯誤.

原因

eslint 默認解析器可能不支持動態導入.

解決

使用 babel-eslint 解決.

npm i babel-eslint -D

  ...
+ parser: "babel-eslint",
  parserOptions: {
    sourceType: 'module',
  }
  ...

最后附上鏈接