Resolving AWS Amplify Build Failures: Keeping Your package.json and package-lock.json in Sync [Solved]

⚠️ Understanding the Problem:
When building web applications with AWS-Amplify (serverless backend), you may encounter issues during your deployment process. One of the common and of course most frustrating issue i came across recently was the package.json and package-lock.json synchronization error. Before diving into the solution, lets have a clear understanding of the issue first.

Meme from http://www.quickmeme.com/
When deploying your project to AWS Amplify, it is important to understand that AWS Amplify relies on your project’s package-lock.json file to make sure the correct dependencies are installed in. And if there’s a mismatch between your package.json and package-lock.json files, it is inevitable that you will encounter the following error during the process of Frontend build phase:

Entire log of this error can be found on this github issue log link

As you notice this error sometimes can be frustrating to deal with, as because personally, it took me 6 hours to fix the issue. However, there is an effective solution to get around this problem.

⚙️ Solutions
Lets first discuss the most viable solution that usually will solve this issue in AWS Amplify deployment process.

Solution 1:
First approach is to ensure your local development environment has synchronized package.json and package-lock.json files. This is done by following these steps:

Delete your package-lock.json file and the node_modules folder
Re-generate the package-lock.json file by running the following command:

npm install

While this solution works for many, it may not be sufficient for your AWS Amplify environment. And it was true for my case, it did not get the issue resolved. So if you are still facing the issue after trying above method, don’t worry, the second alternative approach will get the job done.

Solution 2:
If syncing the files locally does not resolve this issue, try updating your AWS Amplify build scripts setting. Here is how you can do it:

Navigate to your Aws Amplify Console and open your amplify.yml file [Aws Amplify Console -> App Settings -> Build Settings].
Modify your preBuild setting in the build specification of your app to include the following commands:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install --package-lock-only
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/* 

As you may notice usually only the difference made is the inclusion of the npm install --package-lock-only command, which ensures that your Aws Amplify environment uses the synchronized files. This setting configuration will help you to avoid the synchronization issue during deployment.

⛓ Outro:
Sychcronizing your package.json and package-lock.json files is important to the success of your Aws Amplify deployments. Because if you are facing such issue for the first time, it can be your frustration of hours of searching and learning the issue in depth.

Using the above methods you will save your time and energy to solve this obstacle and keep your Amplify project running smoothly. With a right troubleshooting and right adjustments in the config file, you can resolve the sync issue.

Gif from https://tenor.com/
Remember that key is not to give up when solving such common issues.

Now, you are well-equipped to work around with this challenge. Enjoy your hassle-free Aws Amplify project building experience.

Happy Coding :)