GatsbyJS 2.18.16

December 23rd, 2019

17 minute read 📗

Recently I updated to the current latest version of GatsbyJS - 2.18.16 from 2.10.0. When I tried to deploy new content to my site, I got the following error:

Error: Cannot find module 'gatsby/dist/utils/create-content-digest'

I had no idea what this meant. As a result, I decided to run

npx gatsby build

locally to see what would happen there. I usually do that, but things were going so swimmingly and I was not adding anything except content, so I thought it would not be necessary to run a build locally to check if everything was working properly. Boy was I wrong!

When I ran

npx gatsby build

in Terminal, I got the following:

npx gatsby build                                                       ⏎
The above error occurred in the <StoreStateProvider> component:
    in StoreStateProvider
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.
Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.

“What is going on here?”, I asked myself. I never got this before! Of course I had not been running on Node.js 12.14.0 or using GatsbyJS 2.18.16, so anything was possible!

I googled this issue and found the following solution (which worked). The first part which explained the issue:

I hit this issue. It's because there's two versions of react installed. Run an npm ls react to see them. I have a version of react specified in my package.json, and looks like gatsby/gatsby-cli 2.18.5 has a different version of react.
I learned of the issue through this page.
Still trying to fix the issue…

And the second part which revealed the working solution:

I fixed the problem! I used npm to uninstall, then (re)install react, react-dom, and gatsby. I did it in that exact order (I don't believe ordering would matter, but FYI in case it does).
npm ls react shows two versions, but they're the same and marked as "deduped":
npm ls react
interglobalmedia@0.0.1 /Users/mariacam/Development/interglobalmedia
├─┬ gatsby@2.18.16
│ └─┬ gatsby-cli@2.8.21
│   └── react@16.12.0
├─┬ netlify-cms-app@2.9.5
│ └─┬ netlify-cms-core@2.12.1
│   └── react@16.8.6  deduped
└── react@16.8.6

I replaced the Github user’s output from his npm ls react and replaced it with my own.

The reason for deduping occurring is because Gatsby had its own version of react, 16.12.0, and I have my own, 16.8.6, as well as react-dom 16.8.6. Can’t believe that for once I was actually behind in a version lol.

Just as matthewlwang (Github user), I removed the gatsby, react, and react-dom with

npm uninstall gatsby react react-dom -S

and then re-installed gatsby, and installed react@16.12.0 and react-dom@16.12.0. I still encountered the same error:

Error: Cannot find module 'gatsby/dist/utils/create-content-digest'
  Require stack:
  - /Users/mariacam/Development/interglobalmedia/node_modules/gatsby-plugin-manifest/gatsby-node.js
  - /Users/mariacam/Development/interglobalmedia/node_modules/gatsby/dist/bootstrap/resolve-module-export  s.js
  - /Users/mariacam/Development/interglobalmedia/node_modules/gatsby/dist/bootstrap/load-plugins/validate  .js
  - /Users/mariacam/Development/interglobalmedia/node_modules/gatsby/dist/bootstrap/load-plugins/load.js
  - /Users/mariacam/Development/interglobalmedia/node_modules/gatsby/dist/bootstrap/load-plugins/index.js  - /Users/mariacam/Development/interglobalmedia/node_modules/gatsby/dist/bootstrap/index.js
  - /Users/mariacam/Development/interglobalmedia/node_modules/gatsby/dist/commands/build.js
  - /Users/mariacam/Development/interglobalmedia/node_modules/gatsby/node_modules/gatsby-cli/lib/create-c  li.js
  - /Users/mariacam/Development/interglobalmedia/node_modules/gatsby/node_modules/gatsby-cli/lib/index.js  - /Users/mariacam/Development/interglobalmedia/node_modules/gatsby/dist/bin/gatsby.js

I checked to see what was the latest version of the gatsby-plugin-manifest. After finding it on npmjs.com, I found that I did NOT have the latest version. Mine was 2.1.1, and the current latest version is 2.2.34. So I updated to that version.

Then I ran

npx gatsby build

again. This time it was a success. I needed to have the latest version of the gatsby-plugin-manifest plugin! This is what was returned in Terminal:

npx gatsby build                                                                                ✹
success open and validate gatsby-configs - 0.100s
⠋ load plugins
objc[43719]: Class GNotificationCenterDelegate is implemented in both /Users/mariacam/Development/interglobalmedia/node_modules/sharp/vendor/lib/libgio-2.0.0.dylib (0x10918d578) and /Users/mariacam/Development/interglobalmedia/node_modules/gatsby-plugin-manifest/node_modules/sharp/vendor/lib/libgio-2.0.0.dylib (0xsuccess load plugins - 3.194s
success onPreInit - 0.003s
success delete html and css files from previous builds - 0.045s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.041s
success copy gatsby files - 0.324s
success onPreBootstrap - 0.035s
success createSchemaCustomization - 0.003s
success source and transform nodes - 1.374s
success building schema - 0.664s
success createPages - 0.235s
success createPagesStatefully - 0.332s
success onPreExtractQueries - 0.019s
success update schema - 0.059s
success extract queries from components - 0.647s
success write out requires - 0.010s
success write out redirect data - 0.003s
success Build manifest and related icons - 0.004s
success onPostBootstrap - 0.053s
⠀
info bootstrap finished - 11.174 s
⠀
success Building production JavaScript and CSS bundles - 89.628s
success Rewriting compilation hashes - 0.004s
warn code block or inline code language not specified in markdown. applying generic code block
success Generating image thumbnails - 0.201s - 3/3 14.91/s
success run queries - 96.534s - 207/207 2.14/s
success Building static HTML for pages - 10.267s - 190/190 18.51/s
Generated public/sw.js, which will precache 10 files, totaling 495161 bytes.
info Done building in 118.647570966 sec

Now to try and deploy to Netlify again! But guess what? It did not succeed on remote build on Netlify. Why?

There were to calls to sharp locally. One was in the path

/Users/mariacam/Development/interglobalmedia/node_modules/sharp/vendor/lib/libgio-2.0.0.dylib

and the other in the path

/Users/mariacam/Development/interglobalmedia/node_modules/gatsby-plugin-manifest/node_modules/sharp/vendor/lib/libgio-2.0.0.dylib

which was located within the newly updated gatsby-plugin-manifest plugin. The reason why, however, build was successful locally, is because OSX does not care if there are two installs of the same thing. It will simply choose one to implement.

npx gatsby build
success open and validate gatsby-configs - 0.097s
⠋ load plugins
objc[44518]: Class GNotificationCenterDelegate is implemented in both /Users/mariacam/Development/interglobalmedia/node_modules/sharp/vendor/lib/libgio-2.0.0.dylib (0x10998c578) and /Users/mariacam/Development/interglobalmedia/node_modules/gatsby-plugin-manifest/node_modules/sharp/vendor/lib/libgio-2.0.0.dylib (0x

When I googled this issue of duplicate files, I found the following on Github:

The Mac filesystem can't tell the difference, so it just saves one of the files.

The Netlify builds run in a linux environment which can tell the difference between the two files, so both files exist after Netlify clones your git repo.

This results in a conflict which results in a failed build.

So what did I do? I knew that the sharp file I needed resided in gatsby-plugin-manifest, so I removed the following from node_modules:

/Users/mariacam/Development/interglobalmedia/node_modules/sharp/vendor/lib/libgio-2.0.0.dylib

When I ran the build again, I got the following:

npx gatsby build                                                                                ✹
success open and validate gatsby-configs - 0.087s                                                        ⠋ load plugins
objc[44989]: Class GNotificationCenterDelegate is implemented in both /usr/local/Cellar/glib/2.58.2/lib/libgio-2.0.0.dylib (0x10990e498) and /Users/mariacam/Development/interglobalmedia/node_modules/gatsby-plugin-manifest/node_modules/sharp/vendor/lib/libgio-2.0.0.dylib (0x10b25a578). One of the two will be used. success load plugins - 5.956s

Since

/usr/local/Cellar/glib/2.58.2/lib/libgio-2.0.0.dylib

Only resided locally, I knew there would be no potential for file duplication, and that the remote build on Netlify should succeed. And it did. I got the following back:

6:41:58 PM: Build ready to start
6:42:00 PM: build-image version: 9cade8af58c2cf3a17a1e9433d2e979149488837
6:42:00 PM: build-image tag: v3.3.5
6:42:00 PM: buildbot version: 2d05064ce3dd2eb95d282a24602ab707dd9581e8
6:42:00 PM: Fetching cached dependencies
6:42:00 PM: Starting to download cache of 448.6MB
6:42:02 PM: Finished downloading cache in 1.7596634s
6:42:02 PM: Starting to extract cache
6:42:16 PM: Finished extracting cache in 13.672131193s
6:42:16 PM: Finished fetching cache in 15.607281469s
6:42:16 PM: Starting to prepare the repo for build
6:42:16 PM: Preparing Git Reference refs/heads/master
6:42:18 PM: Starting build script
6:42:18 PM: Installing dependencies
6:42:19 PM: Started restoring cached node version
6:42:23 PM: Finished restoring cached node version
6:42:25 PM: v10.18.0 is already installed.
6:42:26 PM: Now using node v10.18.0 (npm v6.13.4)
6:42:26 PM: Attempting ruby version 2.6.2, read from environment
6:42:28 PM: Using ruby version 2.6.2
6:42:28 PM: Using PHP version 5.6
6:42:28 PM: Started restoring cached node modules
6:42:28 PM: Finished restoring cached node modules
6:42:28 PM: Installing NPM modules using NPM version 6.13.4
6:43:05 PM: > sharp@0.23.4 install /opt/build/repo/node_modules/gatsby-plugin-manifest/node_modules/sharp
6:43:05 PM: > (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
6:43:06 PM: info
6:43:06 PM: sharp
6:43:06 PM: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.8.1/libvips-8.8.1-linux-x64.tar.gz
6:43:08 PM: > core-js@2.6.11 postinstall /opt/build/repo/node_modules/gatsby-cli/node_modules/core-js
6:43:08 PM: > node -e "try{require('./postinstall')}catch(e){}"
6:43:08 PM: Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
6:43:08 PM: The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
6:43:08 PM: > https://opencollective.com/core-js
6:43:08 PM: > https://www.patreon.com/zloirock
6:43:08 PM: Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
6:43:08 PM: > core-js@2.6.11 postinstall /opt/build/repo/node_modules/gatsby/node_modules/core-js
6:43:08 PM: > node -e "try{require('./postinstall')}catch(e){}"
6:43:09 PM: > gatsby-telemetry@1.1.46 postinstall /opt/build/repo/node_modules/gatsby-telemetry
6:43:09 PM: > node src/postinstall.js || true
6:43:09 PM: > gatsby-cli@2.8.21 postinstall /opt/build/repo/node_modules/gatsby/node_modules/gatsby-cli
6:43:09 PM: > node scripts/postinstall.js
6:43:09 PM: > gatsby@2.18.16 postinstall /opt/build/repo/node_modules/gatsby
6:43:09 PM: > node scripts/postinstall.js
6:43:09 PM: > gatsby-cli@2.8.21 postinstall /opt/build/repo/node_modules/gatsby-cli
6:43:09 PM: > node scripts/postinstall.js
6:43:14 PM: npm
6:43:14 PM: WARN netlify-cms-backend-test@2.2.2 requires a peer of immutable@^3.8.2 but none is installed. You must install peer dependencies yourself.
6:43:14 PM: npm
6:43:14 PM: WARN react-redux@4.4.10 requires a peer of redux@^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
6:43:14 PM: npm
6:43:14 PM: WARN slate@0.34.7 requires a peer of immutable@>=3.8.1 but none is installed. You must install peer dependencies yourself.
6:43:14 PM: npm WARN
6:43:14 PM: slate-edit-list@0.11.3 requires a peer of immutable@^3.8.2 but none is installed. You must install peer dependencies yourself.
6:43:14 PM: npm WARN
6:43:14 PM: slate-edit-list@0.11.3 requires a peer of slate@^0.32.0 but none is installed. You must install peer dependencies yourself.
6:43:14 PM: npm
6:43:14 PM: WARN slate-edit-table@0.15.2 requires a peer of immutable@^3.8.1 but none is installed. You must install peer dependencies yourself.
6:43:14 PM: npm
6:43:14 PM: WARN slate-edit-table@0.15.2 requires a peer of slate@^0.33.3 but none is installed. You must install peer dependencies yourself.
6:43:14 PM: npm
6:43:14 PM: WARN slate-plain-serializer@0.5.41 requires a peer of immutable@>=3.8.1 but none is installed. You must install peer dependencies yourself.
6:43:14 PM: npm
6:43:14 PM: WARN slate-prop-types@0.4.67 requires a peer of immutable@>=3.8.1 but none is installed. You must install peer dependencies yourself.
6:43:14 PM: npm
6:43:14 PM: WARN slate-react@0.12.9 requires a peer of immutable@>=3.8.1 but none is installed. You must install peer dependencies yourself.
6:43:14 PM: npm
6:43:14 PM: WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.1 (node_modules/netlify-cli/node_modules/fsevents):
6:43:14 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
6:43:14 PM: npm WARN
6:43:14 PM: optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules/gatsby/node_modules/fsevents):
6:43:14 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
6:43:14 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules/gatsby-page-utils/node_modules/fsevents):
6:43:14 PM: npm WARN
6:43:14 PM: notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
6:43:14 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
6:43:14 PM: npm WARN
6:43:14 PM: notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
6:43:14 PM: added 603 packages from 244 contributors, removed 67 packages, updated 153 packages and audited 923470 packages in 43.724s
6:43:17 PM: 27 packages are looking for funding
6:43:17 PM: run `npm fund` for details
6:43:17 PM: found 0 vulnerabilities
6:43:17 PM: NPM modules installed
6:43:18 PM: Started restoring cached go cache
6:43:18 PM: Finished restoring cached go cache
6:43:18 PM: unset GOOS;
6:43:18 PM: unset GOARCH;
6:43:18 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
6:43:18 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
6:43:18 PM: go version >&2;
6:43:18 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
6:43:18 PM: go version go1.12 linux/amd64
6:43:18 PM: Installing missing commands
6:43:18 PM: Verify run directory
6:43:18 PM: Executing user command: gatsby build
6:43:21 PM: success open and validate gatsby-configs - 0.168s
6:43:23 PM: success load plugins - 1.782s
6:43:23 PM: success onPreInit - 0.001s
6:43:23 PM: success delete html and css files from previous builds - 0.010s
6:43:23 PM: success initialize cache - 0.006s
6:43:23 PM: success copy gatsby files - 0.033s
6:43:23 PM: success onPreBootstrap - 0.015s
6:43:23 PM: success createSchemaCustomization - 0.001s
6:43:24 PM: success source and transform nodes - 0.797s
6:43:24 PM: success building schema - 0.409s
6:43:24 PM: success createPages - 0.212s
6:43:25 PM: success createPagesStatefully - 0.198s
6:43:25 PM: success onPreExtractQueries - 0.002s
6:43:25 PM: success update schema - 0.045s
6:43:25 PM: success extract queries from components - 0.766s
6:43:25 PM: success write out requires - 0.006s
6:43:25 PM: success write out redirect data - 0.001s
6:43:25 PM: success Build manifest and related icons - 0.001s
6:43:25 PM: success onPostBootstrap - 0.002s
6:43:25 PM: ⠀
6:43:25 PM: info bootstrap finished - 7.416 s
6:43:25 PM: ⠀
6:44:12 PM: success Generating image thumbnails - 46.780s - 77/77 1.65/s
6:45:28 PM: success Building production JavaScript and CSS bundles - 120.591s
6:45:28 PM: success Rewriting compilation hashes - 0.001s
6:45:30 PM: warning code block or inline code language not specified in markdown. applying generic code block
6:45:41 PM: success run queries - 135.802s - 207/207 1.52/s
6:46:29 PM: success Building static HTML for pages - 14.393s - 190/190 13.20/s
6:46:30 PM: Generated public/sw.js, which will precache 10 files, totaling 495161 bytes.
6:46:30 PM: info Done building in 191.509 sec
6:46:30 PM: Skipping functions preparation step: no functions directory set
6:46:30 PM: Caching artifacts
6:46:30 PM: Started saving node modules
6:46:30 PM: Finished saving node modules
6:46:30 PM: Started saving pip cache
6:46:30 PM: Finished saving pip cache
6:46:30 PM: Started saving emacs cask dependencies
6:46:30 PM: Finished saving emacs cask dependencies
6:46:30 PM: Started saving maven dependencies
6:46:30 PM: Finished saving maven dependencies
6:46:30 PM: Started saving boot dependencies
6:46:30 PM: Finished saving boot dependencies
6:46:30 PM: Started saving go dependencies
6:46:30 PM: Finished saving go dependencies
6:46:30 PM: Build script success
6:46:30 PM: Starting to deploy site from 'public/'
6:46:30 PM: Creating deploy tree asynchronously
6:46:33 PM: 417 new files to upload
6:46:33 PM: 0 new functions to upload
6:46:47 PM: Starting post processing
6:47:10 PM: Post processing done
6:47:10 PM: Site is live
6:47:57 PM: Finished processing build request in 5m57.452813855s

When using tools from various sources, there is always a potential for some sort of incompatibility or conflict. One just has to fix the issue(s) one step at a time!

UPDATE: Apparently there was also an Xcode issue resulting from upgrading to OSX Catalinawhich screwed up **Terminal** behavior, but I also had to remove thegatsby-plugin-manifestand thegatsby-plugin-offlinein order to deploy to remote successfully. But it didn't stop there.

When I ran

npx gatsby build

again, I got the following in the Netlify Console during the build process:

11:12:27 PM: <--- Last few GCs --->
11:12:27 PM: [1246:0x3026320] 78872 ms: Scavenge 1320.1 (1435.2) -> 1312.4 (1441.2) MB, 14.8 / 0.0 ms (average mu = 0.244, current mu = 0.120) allocation failure
11:12:27 PM: [1246:0x3026320] 81748 ms: Mark-sweep 1326.1 (1442.6) -> 1315.7 (1442.2) MB, 2802.1 / 0.0 ms (average mu = 0.152, current mu = 0.044) allocation failure scavenge might not succeed
11:12:27 PM: <--- JS stacktrace --->
11:12:27 PM: ==== JS stack trace =========================================
11:12:27 PM: 0: ExitFrame [pc: 0x20dff45dbe1d]
11:12:27 PM: Security context: 0x053d1291e6e9 <JSObject>
11:12:27 PM: 1: assign [0x53d12904de9](this=0x053d12904639 <JSFunction Object (sfi = 0xc8305c8e301)>,0x2b179dd75839 <Object map = 0x304b95c15189>,0x39b4399bc881 <Object map = 0x304b95c10c71>,0x2b179dd75871 <Object map = 0x304b95c15081>)
11:12:27 PM: 2: /* anonymous */(aka /* anonymous */) [0x1f2a3c368a31] [/opt/build/repo/node_modules/terser-webpack-plugin/node_modules/webpac...
11:12:27 PM: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
11:12:27 PM: 1: 0x8fa050 node::Abort() [node]
11:12:27 PM: 2: 0x8fa09c [node]
11:12:27 PM: 3: 0xb0020e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
11:12:27 PM: 4: 0xb00444 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
11:12:27 PM: 5: 0xef4952 [node]
11:12:27 PM: 6: 0xef4a58 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [node]
11:12:27 PM: 7: 0xf00b32 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]
11:12:27 PM: 8: 0xf01464 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
11:12:27 PM: 9: 0xf040d1 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [node]
11:12:27 PM: 10: 0xecd554 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [node]
11:12:27 PM: 11: 0x116d6de v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [node]
11:12:27 PM: 12: 0x20dff45dbe1d
11:12:34 PM: /usr/local/bin/build: line 63: 1246 Aborted (core dumped) gatsby build

The heap out of memory issue resulting in a failed build was due to the version of gatsby-plugin-netlify-cms I was using. 4.1.1. I found out that I had to update to version 4.1.2 or later.

I finally achieved success deploying to Netlify, but at the cost of removing gatsby-plugin-manifest (and gatsby-plugin-offline). I hope the manifest dedupe issue regarding the sharp dependency will be addressed and resolved very soon.

Related Resources

Tagged in: netlify-cms gatsbyjs plugin-conflicts
Categorized under: netlify-cms gatsbyjs
Discuss On Twitter

Created by Maria D. Campbell who lives and works in New York City building useful things. You should follow her on Twitter. She also has a developer blog mariadcampbell.com you may want to check out!