Various Gatsby build problems and how to fix them

September 04, 2024

This blog runs Gatsby and I have been quite happy with it for what I need but after my latest post I noticed something was broken when I tried to npm i from scratch and build the site. This post documents my fabulous journey through time to uncover the hidden traps of trusting the claim that once you have package.json and package-lock.json and same NodeJS version you are safe.

Problem no. 1 - npm install doesn’t work for some reason

I got the same problem from my Windows 10 box and from my Azure Devops unix agent that looks like this :

npm error npm error code 127
npm error npm error path /home/vsts/.npm/_cacache/tmp/git-cloneIA1764/node_modules/@gatsbyjs/reach-router
npm error npm error command failed
npm error npm error command sh -c husky install
npm error npm error sh: 1: husky: not found

The fix

This one was quite simple - having husky in package.json didn’t helped, neither running npm install -g husky so the last option was to opt out from running post install task/s and run npm install --ignore-scripts, this way the node_modules was created and everyone was happy.

Problem no. 2 - Error: Something went wrong installing the “sharp” module , Cannot find module ‘../build/Release/sharp-win32-x64.node’

OK so now the npm install problem out of the way we can build the thing, right? Big fat NOPE, we can’t since we have different problem now (the error is different a bit since I took this from my Azure DevOps unix agent):

success compile gatsby files - 1.230s
success load gatsby config - 0.046s
error 
Something went wrong installing the "sharp" module
  - Install with verbose logging and look for errors: "npm install --ignore-scri  pts=false --foreground-scripts --verbose sharp"
  - Install for the current linux-x64 runtime: "npm install --platform=linux --a  rch=x64 sharp"
  - Consult the installation documentation: https://sharp.pixelplumbing.com/inst  all (plugins)
  
  - sharp.js:37 Object.<anonymous>
    [s]/[sharp]/lib/sharp.js:37:9
  
  - loader:1469 Module._compile
    node:internal/modules/cjs/loader:1469:14
  
  - loader:1548 Object.Module._extensions..js
    node:internal/modules/cjs/loader:1548:10
  
  - loader:1288 Module.load
    node:internal/modules/cjs/loader:1288:32
  
  - loader:1104 Function.Module._load
    node:internal/modules/cjs/loader:1104:12
  
  - loader:1311 Module.require
    node:internal/modules/cjs/loader:1311:19
  
  - helpers:179 require
    node:internal/modules/helpers:179:18
  
  - constructor.js:11 Object.<anonymous>
    [s]/[sharp]/lib/constructor.js:11:1
  
  - loader:1469 Module._compile
    node:internal/modules/cjs/loader:1469:14
  
  - loader:1548 Object.Module._extensions..js
    node:internal/modules/cjs/loader:1548:10
  
  - loader:1288 Module.load
    node:internal/modules/cjs/loader:1288:32
  
  - loader:1104 Function.Module._load
    node:internal/modules/cjs/loader:1104:12
  
  - loader:1311 Module.require
    node:internal/modules/cjs/loader:1311:19
  
  - helpers:179 require
    node:internal/modules/helpers:179:18
  
  - index.js:6 Object.<anonymous>
    [s]/[sharp]/lib/index.js:6:15
  
  - loader:1469 Module._compile
    node:internal/modules/cjs/loader:1469:14
  

not finished load plugins - 0.321s

##[error]Bash exited with code '1'.

The fix no. 1

Sweet, running npm list sharp in the root reveals several spots where the sharp package is, all seems fine but well it is not. A bit of google reveals this link : https://sharp.pixelplumbing.com/install#aws-lambda and exactly this line :

npm install --os=linux --cpu=x64 sharp

Since it seems that we are not able to specify os and cpu exactly in package.json I tried this as separate post npm install step and it worked like charm!

Just for the record, for Windows the step should look like this :

npm install --os=win --cpu=x64 sharp

or respectively you might need to change the cpu on your box.

The fix no. 2

Since the publication of this post I found out there is another possible solution so maybe you need to switch the previous step with this (I found out that I had the problem to run sharp on unix build agents, Windows was fine for some reason)

npm rebuild --verbose sharp

as described https://stackoverflow.com/questions/56723276/how-to-fix-something-went-wrong-installing-the-sharp-module-and-cannot-find-mo and here https://stackoverflow.com/questions/64987212/something-went-wrong-installing-the-sharp-module/76469890.

Problem no. 3 - How to change the azure-pipelines.yml

This one is quite easy : I made separate steps to install NodeJS, to npm install with -ignore-scripts, then to force sharp to be installed with correct os and cpu and then npm run build and you are done. For my setup this snippet works like charm :

# Node.js
# Build a general Node.js project with npm.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- task: UseNode@1
  inputs:
    version: '22.x'
  displayName: 'Install Node.js 22.x'

- script: |
    npm install --ignore-scripts
  displayName: 'npm i with --ignore-scripts'

- script: |
    npm rebuild --verbose sharp
  displayName: 'npm rebuild --verbose sharp'

- script: |
    npm run build
  displayName: 'build gatsby webpage'

- task: AzureStaticWebApp@0
  inputs:
      app_location: '/public'
      azure_static_web_apps_api_token: $(deployment_token)
      skip_app_build: true
      verbose: true

Please note that these steps did not worked for me with NodeJS 22, I got under unix this error :

error "internal-data-bridge" threw an error while running the sourceNodes lifecycle:

"length" is outside of buffer bounds


  RangeError: "length" is outside of buffer bounds
  
  - buffer:1066 Buffer.proto.utf8Write
    node:internal/buffer:1066:13
  
  - pack.js:31 Packr.encodeUtf8
    [s]/[msgpackr]/pack.js:31:18
  
  - pack.js:324 pack
    [s]/[msgpackr]/pack.js:324:15
  
  - pack.js:702 Packr.writeRecord
    [s]/[msgpackr]/pack.js:702:6
  
  - pack.js:422 pack
    [s]/[msgpackr]/pack.js:422:7
  
  - pack.js:129 Packr.pack.encode
    [s]/[msgpackr]/pack.js:129:6
  
  - write.js:89 writeInstructions
    [s]/[lmdb]/write.js:89:28
  
  - write.js:601 LMDBStore.put
    [s]/[lmdb]/write.js:601:11
  
  - caching.js:80 LMDBStore.put
    [s]/[lmdb]/caching.js:80:22
  
  - nodes.ts:14 updateNodes
    [s]/[gatsby]/src/datastore/lmdb/updates/nodes.ts:14:22
  
  - lmdb-datastore.ts:247 updateDataStore
    [s]/[gatsby]/src/datastore/lmdb/lmdb-datastore.ts:247:20
  
  - lmdb-datastore.ts:298 callback
    [s]/[gatsby]/src/datastore/lmdb/lmdb-datastore.ts:298:7
  
  - index.ts:183 
    [s]/[gatsby]/src/redux/index.ts:183:11

Hope this helps.