1

I'm making this site using Next.JS hosted @ Vercel. One of the packages I'm using is a custom one that I've forked, updated it in my project and after the build, was able to make it work locally. I posted a question here about it.

However, deploy is failing on Vercel's side with a message complaining that that same custom module I'm using couldn't be found. Everything works fine locally.

14:40:04.802    Failed to compile.
14:40:04.803    ModuleNotFoundError: Module not found: Error: Can't resolve 'react-headroom' in '/vercel/path0/src/components/layout'
14:40:04.803    > Build error occurred
14:40:04.804    Error: > Build failed because of webpack errors
14:40:04.805    at /vercel/path0/node_modules/next/dist/build/index.js:17:924
14:40:04.805    at runMicrotasks (<anonymous>)
14:40:04.805    at processTicksAndRejections (internal/process/task_queues.js:95:5)
14:40:04.805    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584)

I believe this is due to cached builds from the previous version (before I forked and edited my package). I've come across some solutions like using Vercel CLI to clean the cached builds but it seems not to work (vercel --force) because I get the very same error @ build time.

I'm not sure what I could do to solve this issue or if something is missing in this process.

EDIT: here it's my package.json file

{
  "name": "cms-sanity",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "npm run build:sanity && pwd && npm run build:web",
    "build:web": "next build",
    "start:web": "next start",
    "build:sanity": "cd studio && sanity build ../public/studio -y && cd ..",
    "start:sanity": "cp .env ./studio/.env.development && cd studio && sanity start",
    "postinstall": "lerna bootstrap"
  },
  "dependencies": {
    "@chakra-ui/icons": "^1.0.15",
    "@chakra-ui/react": "^1.6.7",
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "@sanity/block-content-to-react": "^3.0.0",
    "@sanity/client": "^2.8.0",
    "@sanity/image-url": "^0.140.19",
    "axios": "^0.22.0",
    "classnames": "^2.2.6",
    "date-fns": "^2.15.0",
    "framer-motion": "^4",
    "fs": "^0.0.1-security",
    "google-spreadsheet": "^3.1.15",
    "next": "^10.2.0",
    "next-sanity": "^0.1.5",
    "next-sanity-image": "^3.1.6",
    "next-seo": "^4.26.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-headroom": "https://github.com/eduoliveira85/react-headroom/",
    "react-hook-form": "^7.3.6",
    "react-icons": "^4.2.0",
    "react-jss": "^10.8.0",
    "react-world-flags": "^1.4.0",
    "swr": "^0.5.5"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^4.0.3",
    "@sanity/cli": "^2.0.5",
    "lerna": "^4.0.0",
    "postcss-preset-env": "^6.7.0"
  }
}
Eduardo Oliveira
  • 395
  • 2
  • 18

2 Answers2

0

There @react-headroom dependency in your package.json points to a github link rather than a dependency version. That seems to be the issue.

Mugo Mwangi
  • 1
  • 1
  • 1
  • I've solved this issue by simply copying the files that were need to my project. Forgot to post an answer. Anyhow, not sure this would be the problem. This is the correct way to point out a version of a private repo other than an NPM package. Perhaps the method is wrong, but the practice is well described in here: https://stackoverflow.com/questions/28728665/how-to-use-private-github-repo-as-npm-dependency – Eduardo Oliveira Jan 06 '22 at 13:51
0

I've copied just the files from the repo to my project, installed dependencies manually and this solved the issue. Won't need updates for this lib anyway.

Eduardo Oliveira
  • 395
  • 2
  • 18