解决eslint报错“Parsing error: ‘import‘ and ‘export‘ may only appear at the top level”

webpack与eslint配置：解决import使用位置报错

最新推荐文章于 2025-09-10 23:50:44 发布

原创最新推荐文章于 2025-09-10 23:50:44 发布 · 1.6w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #eslint

webpack 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在使用webpack进行懒加载时遇到的'import'和'export'只能出现在顶级位置的eslint错误。通过修改package.json文件中的eslint配置，添加'allowImportExportEverywhere'为true，可以关闭这一限制。这样可以正确处理在函数内部的import语句，确保代码正常打包和运行。

报错详情：

“Parsing error: ‘import’ and ‘export’ may only appear at the top level”

报错代码

document.querySelector('#btn').onclick = function () {
  import(/* webpackChunkName: 'test' */'./print')
    .then(({ print }) => {
      console.log(print(2, 3));
    })
    .catch(() => {
      console.log('加载失败');
    });
};

在该文件中使用懒加载的时候，使用webpack打包，eslint检查出现：'import' and 'export' may only appear at the top level”

为了关闭eslint关于import使用位置的检查，可以在package.json文件中加上如下配置

"eslintConfig": {
    "parser": "babel-eslint",// 解析器，默认使用Espree
    "parserOptions": {
      "sourceType": "module", // 指定来源的类型，"script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
      "allowImportExportEverywhere": true // 不限制eslint对import使用位置
    }
  },