Webpack 外部模块在优化时出错答案

【问题标题】：Webpack external module gives an error on optimizationWebpack 外部模块在优化时出错
【发布时间】：2021-12-30 15:15:07
【问题描述】：

我是 Node 和 Angular 的新手，但我的任务是使用它们更新应用程序。

当我在我更新的代码上运行 ng build --configuration production --base-href 时，我得到了

Error: Optimization error [main.0a57bb482e1539bc.js]: Error: Transform failed with 1 error:
main.0a57bb482e1539bc.js:78551:5: error: Expected identifier but found "="
    at failureErrorWithLog (C:\Users\[redacted]\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:1493:15)
    at C:\Users\[redacted]\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:1282:29
    at C:\Users\[redacted]\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:629:9
    at handleIncomingPacket (C:\Users\[redacted]\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:726:9)
    at Socket.readFromStdout (C:\Users\[redacted]\node_modules\@angular-devkit\build-angular\node_modules\esbuild\lib\main.js:596:7)
    at Socket.emit (events.js:315:20)
    at addChunk (internal/streams/readable.js:309:12)
    at readableAddChunk (internal/streams/readable.js:284:9)
    at Socket.Readable.push (internal/streams/readable.js:223:10)
    at Pipe.onStreamRead (internal/stream_base_commons.js:188:23)

如果我运行ng build --configuration production --base-href --optimization false，它会构建，我可以看到导致错误的行 (main.0a57bb482e1539bc.js:78551) 是：

// EXTERNAL MODULE: buffer/
var  = __webpack_require__(7555);

我可以看出它显然在语法上不正确。

buffer 被用作// CONCATENATED MODULE: ./node_modules/amazon-cognito-identity-js/es/AuthenticationDetails.js 的依赖项

但是，如果我创建一个新应用并在其中使用代码 import {AuthenticationDetails} from "amazon-cognito-identity-js";，我就没有这个问题。我看到的是这一行：

/* harmony import */ var buffer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! buffer */ 7555);

我想知道是什么导致我更新后的代码使用// EXTERNAL MODULE: buffer/，以及如何通过使用/* harmony import */ 将其更改为没有问题。

Angular CLI：13.0.3 节点：14.16.1

【问题讨论】：

你检查过两者之间的版本吗？我猜这是一个在更高版本中发现并修复的错误。
Angular CLI 的相同版本：13.0.3 节点：14.16.1 和 amazon-cognito-identity-js。
基本上我不会建议这样做，但由于它是 node_modules 文件中的一个问题，请继续尝试从头开始删除 node_modules 和 npm install （如果您还没有尝试过）。
问题很可能是此应用程序中的某些内容正在修改 Webpack "externals" 配置，从而导致输出中断。为 Node.js 模块 such as "buffer" 创建外部条目是一种常见的解决方法。检查您的 angular.json 是否提及 buffer，以及任何允许自定义 webpack 配置的 Angular CLI 插件。
我在 github 上看到了一个类似的问题，也许跟着那个？ github.com/aws/aws-sdk-js/issues/3973

标签： node.js angular npm webpack

【解决方案1】：

使用 cognito 和 aws-sdk 升级到 Angular 13 后出现此错误，有效的是删除 package-lock.json 和 node_modules 并再次运行“npm install”。

【讨论】：

【解决方案2】：

从 Angular 11 -> 12 升级时遇到相同的构建问题。

原版 - 优化错误

"amazon-cognito-identity-js": "^5.2.4",

降级版本 - 无优化错误

"amazon-cognito-identity-js": "^3.3.3",

降低版本未发现应用降级。 “3.3.3”是amazon-cognito-identity-js的最新稳定版本。

【讨论】：