Deploy Gatsby to Vercel with local package/dependency

user_6118046 0
Viewed 530

I have a gatsby site that uses a local package and it is not possible/allowed to make it public.

The site builds fine locally, but when I try to deploy it on Vercel, it can't find the package. I've found a few related issues but none of the solutions have worked for me so far.

The package is in Gatsby's static folder which is located in root and gets copied over to the public folder on build. In my package.json I have the following:

"devDependencies": {
    "fslightbox-react": "file:./public/fslightbox-react-pro-1.4.2.tgz",
  },
 "scripts": {
    "install-plugin": "cd public && yarn add fslightbox-react-pro-1.4.2.tgz",
    "build": "yarn install-plugin && gatsby build",
  },

Then in the Vercel settings I override the build command with yarn build

I've tried multiple variations of the install-plugin command and tried changing the path but I keep getting the following error when deploying:

error "./public/fslightbox-react-pro-1.4.2.tgz": Tarball is not in network and can not be located in cache (["/vercel/path0/public/fslightbox-react-pro-1.4.2.tgz","/vercel/.cache/yarn/v6/npm-fslightbox-react-1.4.2-aa6c77ceb2feb8487853163cb9a3d3a3d91ca85f/node_modules/fslightbox-react/.yarn-tarball.tgz"])

I previously was using npm and while the error message was slightly different, it basically also couldn't find the package in /vercel/path0/public/...

I'm almost sure this is something basic and I'm just overlooking something obvious but at this point, any help or pointers would be much appreciated.

SOLUTION so nobody has to dig through all the comments: No need for command overrides in vercel, just gotta fix up that install-plugin command a bit like so:

"install-plugin": "cd static && yarn add file:static/fslightbox-react-pro-1.4.2.tgz",
"build": "yarn install-plugin && gatsby build",

The package should be in the static folder which should be located in root

vercel gatsby
1 Answers

Have you tried changing the build command in Vercel's dashboard?

According to their documentation, you can customize your build and deploy command:

Vercel's dashboard

Here, in your build command or install command you can just add something like:

INSTALL COMMAND: yarn install && yarn install-plugin
BUILD COMMAND: yarn install-plugin && gatsby build

By the way, I've just noticed that the location of the devDependencies is:

"fslightbox-react": "file:./public/fslightbox-react-pro-1.4.2.tgz",

The /public folder only exists when you have already build your project, meaning that in a fresh install (what Vercel does), it will never exist because it's not even created yet. You are "hacking" this behavior because you have already built your project locally and the folder already exists.

If you run a gatsby clean locally (which deletes the .cache and the /public folders) you should be able to reproduce locally the issue. Try changing the dependency location to the static folder with something similar to:

"fslightbox-react": "file:./static/fslightbox-react-pro-1.4.2.tgz",

Or use the uncompressed file directly.

Alternatively, you can upload your dependency to an owned private repository and use a custom version without using the file directly:

"devDependencies" : {
  "fslightbox-react" : "git+https://[GITHUB_TOKEN]:x-oauth-basic@github.com/[USER]/[YOUR_REPO_URL].git",
}

Source: npm install private github repositories by dependency in package.json

Overall, this last approach is the best and less aggressive since, if you use the static folder, you will be transpiling that script to the public folder, increasing the bundle size in a file that is not intended to do so.

Solution

"install-plugin": "cd static && yarn add file:static/fslightbox-react-pro-1.4.2.tgz",
"build": "yarn install-plugin && gatsby build",
user_55853710
Related