Digital Ocean app deployment error: package and package-lock are not in sync running npm ci

user_15651616 0
Viewed 778

I've been trying to deploy my app into a digital ocean app here, but for the past days, the app hits a fatal error saying:

[2022-06-13 07:11:31] npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
[2022-06-13 07:11:31] npm ERR! 
[2022-06-13 07:11:31] npm ERR! Missing: @babel/core@7.18.5 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @ampproject/remapping@2.2.0 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @babel/generator@7.18.2 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @babel/helper-compilation-targets@7.18.2 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @babel/helper-module-transforms@7.18.0 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @babel/helpers@7.18.2 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @babel/parser@7.18.5 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @babel/template@7.16.7 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @babel/traverse@7.18.5 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: gensync@1.0.0-beta.2 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: json5@2.2.1 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: semver@6.3.0 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @jridgewell/gen-mapping@0.1.1 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @jridgewell/trace-mapping@0.3.13 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @jridgewell/gen-mapping@0.3.1 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: jsesc@2.5.2 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @babel/compat-data@7.18.5 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @babel/helper-validator-option@7.16.7 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: browserslist@4.20.4 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: semver@6.3.0 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @babel/helper-environment-visitor@7.18.2 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @babel/helper-simple-access@7.18.2 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @babel/helper-split-export-declaration@7.16.7 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @babel/helper-function-name@7.17.9 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @babel/helper-hoist-variables@7.16.7 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: globals@11.12.0 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @jridgewell/set-array@1.1.1 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @jridgewell/sourcemap-codec@1.4.13 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: @jridgewell/resolve-uri@3.0.7 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: electron-to-chromium@1.4.152 from lock file
[2022-06-13 07:11:31] npm ERR! Missing: node-releases@2.0.5 from lock file
[2022-06-13 07:11:31] npm ERR! 
[2022-06-13 07:11:31] npm ERR! Clean install a project
[2022-06-13 07:11:31] npm ERR! 
[2022-06-13 07:11:31] npm ERR! Usage:
[2022-06-13 07:11:31] npm ERR! npm ci
[2022-06-13 07:11:31] npm ERR! 
[2022-06-13 07:11:31] npm ERR! Options:
[2022-06-13 07:11:31] npm ERR! [--no-audit] [--foreground-scripts] [--ignore-scripts]
[2022-06-13 07:11:31] npm ERR! [--script-shell <script-shell>]
[2022-06-13 07:11:31] npm ERR! 
[2022-06-13 07:11:31] npm ERR! aliases: clean-install, ic, install-clean, isntall-clean
[2022-06-13 07:11:31] npm ERR! 
[2022-06-13 07:11:31] npm ERR! Run "npm help ci" for more info
[2022-06-13 07:11:31] 
[2022-06-13 07:11:31] npm ERR! A complete log of this run can be found in:

I am not able to find out where the issue is happening, I am able to complete a build locally. This issue only happens while I deploy to Digital Ocean.

Here is my package.json:

{
  "name": "sample-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build && next-sitemap --config next-sitemap.config.js",
    "start": "next start",
    "analyze": "ANALYZE=true next build"
  },
  "dependencies": {
    "@emotion/cache": "^11.7.1",
    "@emotion/react": "^11.9.0",
    "@emotion/server": "^11.4.0",
    "@emotion/styled": "^11.8.1",
    "@mui/material": "^5.8.3",
    "@next/bundle-analyzer": "^12.1.6",
    "@parse/react-ssr": "^0.0.1-alpha.18",
    "appbase-js": "^5.0.0",
    "axios": "^0.27.2",
    "body-scroll-lock": "^4.0.0-beta.0",
    "cacheable-response": "^2.7.10",
    "child_process": "^1.0.2",
    "firebase": "^9.8.3",
    "framer-motion": "^6.3.11",
    "heic2any": "^0.0.3",
    "isomorphic-dompurify": "^0.19.0",
    "javascript-time-ago": "^2.5.4",
    "js-cookie": "^3.0.1",
    "memory-cache": "^0.2.0",
    "moment": "^2.29.3",
    "next": "^12.0.7",
    "next-redux-wrapper": "^7.0.5",
    "next-sitemap": "^3.0.5",
    "parse": "^3.4.2",
    "react": "^17.0.2",
    "react-confetti": "^6.1.0",
    "react-contenteditable": "^3.3.6",
    "react-device-detect": "^2.2.2",
    "react-dom": "^17.0.2",
    "react-image-file-resizer": "^0.4.8",
    "react-infinite-scroll-component": "^6.1.0",
    "react-lazy-load-image-component": "^1.5.4",
    "react-masonry-css": "^1.0.16",
    "react-redux": "^8.0.2",
    "react-textarea-autosize": "^8.3.4",
    "react-time-ago": "^7.2.1",
    "react-toggle": "^4.1.2",
    "react-tweet-embed": "^2.0.0",
    "recharts": "^2.1.10",
    "redux": "^4.2.0",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.4.1",
    "sass": "^1.52.3",
    "sharp": "^0.30.6",
    "swr": "^1.3.0",
    "use-long-press": "^2.0.2",
    "validator": "^13.7.0"
  }
}

Possible Solutions I have tried

  • I tried deleting my package-lock.json file and created a fresh version, but it didn't solve it.
  • I tried running npm audit fix but that didn't work out too

What am I missing here?

digital-ocean package.json next.js reactjs
1 Answers

I have the same problem earlier when deploying Strapi v4.3.0 to DigitalOcean app platform. After some tinkering, I found out that my local NodeJS version & local NPM version is different from what DigitalOcean uses.

I suspect that your local environment is using an earlier npm version while digitalocean using the latest version.

Starting from NPM version v8.4.1 ( https://github.com/npm/cli/pull/4369 ) npm validates the lock file when running the npm ci command.

Fix for my case

  1. set my engines in package.json same with your local development. For example: with this set, DigitalOcean will use Node version LTS V16.16.0 and NPM version v8.11.0
  "engines": {
    "node": ">=12.x.x <=16.x.x",
    "npm": ">=6.0.0"
  },
  1. update NodeJs to LTS V16.16.0 & update NPM to v8.11.0
  2. delete node_modules & package_lock.json from the project folder
  3. clean npm cache with npm cache clean –force
  4. do npm install again to re-download the package & re-generate `package-lock.json
  5. verify if its working by running npm ci
  6. push new package-lock.json to git
user_113478590
Related