将Vanilla JS项目迁移至Node.js时Parcel2报非顶层require()调用错误如何解决？

问题描述 #

将Vanilla JS网页项目迁移到Node.js环境，用Parcel 2构建时触发以下错误：

@parcel/transformer-js: Conditional or non-top-level `require()` call. This causes the resolved module and all dependencies to be wrapped.

  C:\Users\xxx\zabbix_console.js:1:1
  > 1 | import { sendNotification, fetchResource, clipboardCopy, ENDPOINT, getSetting, saveSetting } from "../libs/utils.js";
  >   | ^
    2 | import { getUserData } from "../libs/login.js";
    3 | import  {EVENT_TYPE } from "../libs/events.js";

  ℹ Learn more: https://parceljs.org/features/scope-hoisting/#avoid-conditional-require()

@parcel/core: Asset graph walked
@parcel/core: Asset graph walked
- Building runtime-9b535c67382b3742.js...

但报错文件zabbix_console.js及其依赖（utils.js用ES模块导入，events.js无导入语句）均未使用require()。

已尝试的解决方案（均无效）：

• 将文件扩展名改为.mjs
• 在package.json中设置target为esmodule
• 在package.json中添加type: module
• 删除.parcel-cache后重新构建
• 通过.parcelrc指定.js/.mjs文件的转换器

11/25更新：添加--no-optimize参数后代码可编译，但仍会出现该require()错误，暂未明确原因。

可能的解决思路 #

• 排查第三方依赖：项目依赖的npm包中可能存在使用CommonJS格式（含require()）的模块，Parcel处理ES与CommonJS混合模块时可能触发该警告。可以用npm ls查看依赖树，定位相关包。
• 完善Parcel Target配置：确保package.json的target配置明确指定模块类型，示例：

{
  "targets": {
    "main": {
      "type": "module"
    }
  }
}

• 检查动态导入：代码中若存在import()动态导入语法，Parcel编译时可能生成require()相关代码，可排查这类隐式情况。
• 升级Parcel版本：旧版Parcel可能存在ES模块与CommonJS兼容的bug，尝试更新到最新稳定版再构建。
• 验证.parcelrc配置：确保转换器配置未强制使用CommonJS处理，示例配置：

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{js,mjs}": ["@parcel/transformer-js"]
  }
}

内容的提问来源于stack exchange，提问作者Jh62