Angular从10升级至12时报“Must use import to load ES Module”错误如何解决

解决方案 #

这个错误是@angular/compiler-cli和@angular-devkit/build-angular版本不匹配导致的：v12及以上版本的@angular/compiler-cli默认是ES模块格式，但低版本的@angular-devkit/build-angular仍使用CommonJS的require()语法加载该包，就会触发该报错。修改node_modules内的配置是无效的，依赖安装时会自动还原，直接按以下步骤操作即可：

• 删除项目根目录下的node_modules文件夹，以及对应的依赖锁定文件：npm用户删package-lock.json、yarn用户删yarn.lock、pnpm用户删pnpm-lock.yaml，清除旧依赖缓存
• 打开项目根目录的package.json，核对以下依赖的大版本必须完全匹配，且都为12.x版本：
  • @angular/compiler-cli
  • @angular-devkit/build-angular
    若使用了自定义webpack构建，还需要把@angular-builders/custom-webpack也升级到对应Angular12的兼容版本
• 同步核对TypeScript版本，Angular12仅兼容4.2.x、4.3.x两个大版本的TypeScript，版本过高或过低都会引发兼容问题
• 执行依赖重装命令：npm install（或对应包管理器的安装命令）
• 确认项目根目录的package.json中没有添加"type": "module"配置，Angular12的默认构建链路不支持项目顶层声明为ES模块

如果完成上述操作后仍有报错，可以全局卸载旧版本的Angular CLI后重装12.x版本的CLI再重试。

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