webpack4升级至webpack5后控制台报Uncaught ReferenceError: arguments未定义错误

报错原因 #

该报错核心原因是 ES 模块规范下禁止访问 arguments 关键字，webpack 5 相比 webpack 4 对 ES 模块的语法校验、打包规则更严格，会直接抛出该引用错误。涉及报错的截图如下：

排查步骤 #

• 检查防抖函数的声明方式：如果debounce是用箭头函数声明的，箭头函数本身没有自身的arguments对象，访问arguments时会向上层作用域查找，若上层作用域为ES模块作用域就会触发报错
• 检查文件的模块类型：如果debounce所在的文件后缀为.mjs，或者项目package.json中配置了"type": "module"，该文件会被识别为ES模块，禁止使用arguments
• 检查webpack输出配置：如果webpack配置中output.environment.module设为true，打包产物会严格遵循ES模块规范，限制arguments的使用

解决方案 #

方案1：修改防抖函数写法（最推荐）

把箭头函数声明的debounce改为普通函数声明，普通函数自带独立的arguments对象，可正常使用：

// 错误写法（箭头函数无arguments）
const debounce = (func, wait) => {
  console.log(arguments)
}

// 正确写法（普通函数支持arguments）
function debounce(func, wait) {
  console.log(arguments)
}

方案2：用剩余参数语法替代arguments

如果不想修改函数声明类型，可用ES6剩余参数...args完全替代arguments的使用，兼容ES模块规范：

const debounce = (func, wait, ...args) => {
  // args包含所有传入的参数，和arguments作用一致
  console.log(args)
}

方案3：关闭webpack的ES模块输出限制

如果项目不需要输出ES模块格式的产物，可修改webpack配置，关闭模块限制：

// webpack.config.js
module.exports = {
  output: {
    environment: {
      module: false
    }
  }
}

方案4：修改文件模块类型

如果项目全局配置了"type": "module"，可以把包含debounce函数的文件后缀改为.cjs，声明为CommonJS模块，即可正常使用arguments。

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