1

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

Martin Conde
  • 263
  • 2
  • 14

1 Answers1

1

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",
Ferran Buireu
  • 14,305
  • 5
  • 20
  • 41
  • Thanks for the suggestion, I've tried it but still getting the same error unfortunately. – Martin Conde May 11 '21 at 05:06
  • Have you checked yarn versions between environments (local and Vercel)? https://github.com/yarnpkg/yarn/issues/2861 – Ferran Buireu May 11 '21 at 05:11
  • Just checked and both are the same at 1.22.10 – Martin Conde May 11 '21 at 05:20
  • The `public` folder only exists when the project is already built (in fact is what Vercel uploads to the server) so your command will always fail (sorry, didn't notice before). You are "hacking" locally because you had already built your project. If you run a `gatsby clean` you should be able to reproduce the issue locally. To bypass it, I would recommend using another folder rather than the public one because it won't be generated if the command fails. Try using the uncompressed dependency or the static folder directly. – Ferran Buireu May 11 '21 at 05:40
  • That makes sense, locally it works though even after gatbsy clean. Getting closer though thanks to you. I changed the install-plugin command to `cd static && yarn add file:static/fslightbox-react-pro-1.4.2.tgz` and that seems to make it kind of work, at least I am now getting a completely different error which still has to be related to this though. The error I get now is this one. Had to do aa screenshot cause it would have been too long and unreadable in a comment: https://www.dropbox.com/s/5ucqkrac58ub8rl/Screenshot%202021-05-11%20131105.png?dl=0 – Martin Conde May 11 '21 at 06:12
  • Yes just replace `yarn install` for `yarn add` to add new dependencies instead of installing them all. – Ferran Buireu May 11 '21 at 06:13
  • 1
    Removing both overrides for the build and install commands did the trick in the end. Thank you so much for your help, I really appreciate it! Will summarize the solution in the original question for future reference. Thanks again! :) – Martin Conde May 11 '21 at 06:27