CODEWITHSUNDEEP
reactjsamazon-web-servicesbabeljsaws-amplify
FaitAccompli
FaitAccompli

Reputation: 832

AWS Amplify Frontend Build Failed on master branch but successfully builds on a feature branch

I recently added google tag manager on a react-app I'm working on and pushed it in a branch called gtm.

AWS Amplify builds the app successfully and it's up and running. I then merged these changes in the master branch with no merge conflicts. However, in the master branch, (where it's hosted on a custom domain) the app fails to build due to this error:

Error: [BABEL] /codebuild/output/src957941865/src/webapp/src/index.js: Cannot find module '@babel/helper-regex'

Below is the build error displayed in AWS Amplify
Fig. 1 AWS Amplify Build Error

(1) First thing to do was obviously perform this:

yarn add @babel/helper-regex

However, deploying with the new changes only creates another

Error: [BABEL] /codebuild/output/src957941865/src/webapp/src/index.js:

but with a different babel module instead, so this creates a long chain of adding packages that don't necessarily fix the underlying issue.

(2) Second fix I did was revert to a version of the app that was successfully deployed. I initially suspected that the google tag manager was the one causing the problem. However, it wasn't the case. The same error was displayed.

(3) Third thing I did was I referred to fix suggested in this issue (https://github.com/facebook/create-react-app/issues/8062). Summarizing the thread, it says that all I needed to do was to perform the following.

  1. Delete node_modules
  2. Delete yarn.lock
  3. Perform yarn install

Unfortunately, this didn't solve the issue and the build error still persists.

(4) Fourth fix I did was I checked the differences between the two branches master and gtm using git diff master..gtm and here was the result. enter image description here


Seeing that there were differences, out of desperation, I downloaded the **gtm** branch and then copy pasted its contents into the master branch in windows explorer then committed the changes.
Unfortunately, this still didn't fix the issue.

The only thing I haven't tried yet is reconnecting the master branch in AWS amplify but I don't want to risk the website not working since there are active users and if I ever go through with it and it still didn't fix the issue it'll cause more inconvenience. I hope someone already experienced this before and can point me to the right direction.

Upvotes: 0

Views: 2864

Answers (2)

jvlucic
jvlucic

Reputation: 81

I had a similar issue recently while tackling a dependency problem for babel-loader with storybook and create-react-app.

enter image description here

After I noticed other preview builds were working correctly, while having the same code as the master branch, I suspected the node_modules cache was the culprit.

I don't know if there's an easier way of cleaning the node_modules cache that amplify uses internally (searched a bit and found nothing), so I just added an extra command in the preBuild phase (rm -rf node_modules)

eg.

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

Once the build was passing, and the cache is regenerated (this is the last step of the build process) you can simply remove the added command and everything works as expected for future builds.

Upvotes: 2

Leon Carlo Valencia
Leon Carlo Valencia

Reputation: 8757

I suggest you also try combining fixes (2) & (3). That is, revert to a version w/out google tag manager followed by a yarn clean-install (i.e. delete node_modules & yarn.lock -> yarn install). The reason for this is your local workspace may still have broken yarn dependencies from the gtm branch even after you revert to a known-good version.

Upvotes: 0

Related Questions