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

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.

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: '21.x'
  displayName: 'Install Node.js 21.x'

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

- script: |
    npm install --os=linux --cpu=x64 sharp
  displayName: 'npm i with dedicated linux cpu type'

- 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.