Webpack报错Cannot read properties of undefined(reading 'toString')的原因与解决

错误成因 #

报错核心原因是**etag变量的值为undefined，而非代码中仅判断的null**。原代码只处理了etag === null的情况，当etag是undefined时，直接执行etag.toString()就会触发"Cannot read properties of undefined (reading 'toString')"错误。

结合场景来看，大概率是Node.js v18.15.0与当前使用的Webpack版本存在兼容性问题，Webpack的缓存策略逻辑未覆盖etag为undefined的边界情况；也可能是项目缓存目录存在损坏文件，导致生成的缓存标识不符合预期。

解决方法 #

1. 临时修复Webpack源码（应急方案） #

找到报错文件node_modules/webpack/lib/cache/PackFileCacheStrategy.js，将报错行的判断逻辑修改为同时兼容null和undefined：

pack.set(identifier, etag == null? null : etag.toString(), data);

或者更严谨的写法：

pack.set(identifier, typeof etag!== 'undefined' && etag!== null? etag.toString() : null, data);

2. 升级Webpack到兼容版本 #

Webpack后续版本已修复该缓存逻辑的边界问题，建议升级到与Node.js v18兼容的版本（推荐Webpack 5.76.0及以上），执行命令：

npm install webpack@latest --save-dev

如果需要锁定版本，可指定具体版本号：

npm install webpack@5.76.0 --save-dev

3. 清理项目缓存 #

删除项目缓存目录，避免损坏的缓存文件导致异常：

• 直接删除node_modules/.cache目录
• 或者执行构建命令时禁用缓存：

npm run build --no-cache

4. 检查Webpack缓存配置 #

确认项目中Webpack的cache配置是否正确，比如使用filesystem类型缓存时，是否有自定义的缓存键生成逻辑导致etag异常。确保配置符合Webpack官方规范，避免手动修改缓存相关的核心逻辑。

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