AWS Amplify 前端构建在主分支上失败，但在功能分支上成功构建

Question

我最近在我正在开发的 react-app 上添加了 google 标签管理器，并将其推送到名为 gtm 的分支中。

AWS Amplify 成功构建了应用程序，并且它已启动并运行。然后我将这些更改合并到主分支中，没有合并冲突。但是，在主分支中（它托管在自定义域上）应用程序由于此错误而无法构建：

错误：[BABEL] /codebuild/output/src957941865/src/webapp/src/index.js： 找不到模块“@babel/helper-regex”

以下是 AWS Amplify 中显示的构建错误

(1) 首先要做的显然是执行此操作：

yarn add @babel/helper-regex

但是，使用新更改进行部署只会创建另一个

错误：[BABEL] /codebuild/output/src957941865/src/webapp/src/index.js：

但是使用不同的 babel 模块，因此这会创建一个长链添加不一定解决潜在问题的包。

(2) 我所做的第二个修复是恢复到已成功部署的应用版本。我最初怀疑谷歌标签管理器是导致问题的原因。然而，事实并非如此。显示了相同的错误。

(3) 我做的第三件事是参考了此问题中建议的修复 (https://github.com/facebook/create-react-app/issues/8062)。总结线程，它说我需要做的就是执行以下操作。

1. 删除节点模块
2. 删除 yarn.lock
3. 执行yarn install

很遗憾，这并没有解决问题，构建错误仍然存​​在。

(4) 我做的第四个修复是我使用git diff master..gtm 检查了两个分支 ma​​ster 和 gtm 之间的差异，这里是结果。

看到有差异，无奈之下，我下载了 **gtm** 分支，然后将其内容复制粘贴到 Windows 资源管理器的主分支中，然后提交更改。
不幸的是，这仍然没有解决问题。

我唯一还没有尝试过的是重新连接 AWS amplify 中的主分支，但我不想冒网站无法正常工作的风险，因为有活跃用户，如果我曾经经历过它仍然没有解决问题，它会造成更多的不便。我希望有人以前已经经历过这种情况，并且可以为我指明正确的方向。

Answer 1

我最近在使用 storybook 和 create-react-app 解决 babel-loader 的依赖问题时遇到了类似的问题。

当我注意到其他预览版本工作正常，而代码与主分支相同时，我怀疑 node_modules 缓存是罪魁祸首。

我不知道是否有更简单的方法来清理 amplify 内部使用的 node_modules 缓存（搜索了一下，没有发现任何东西），所以我只是在 preBuild 阶段添加了一个额外的命令（rm -rf node_modules )

例如。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - rm -rf node_modules
        - yarn install

一旦构建通过并重新生成缓存（这是构建过程的最后一步），您可以简单地删除添加的命令，一切都会按预期运行以供将来构建。

Answer 2

我建议您也尝试结合修复 (2) 和 (3)。也就是说，恢复到没有谷歌标签管理器的版本后跟纱线干净安装（即删除 node_modules 和 yarn.lock -> 纱线安装）。这样做的原因是，即使在您恢复到已知良好的版本后，您的本地工作区可能仍然存在来自 gtm 分支的损坏的纱线依赖关系。