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

最新推荐文章于 2025-04-22 23:33:29 发布

chen__cheng

最新推荐文章于 2025-04-22 23:33:29 发布

阅读量1.6w

点赞数

CC 4.0 BY-SA版权

分类专栏： # webpack 文章标签： webpack eslint

本文链接：https://blog.youkuaiyun.com/chen__cheng/article/details/115343223

webpack 专栏收录该内容

10 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错详情：

“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使用位置
    }
  },