Error: Cannot find module 'gatsby-plugin-image/graphql-utils'

Question

So I'm trying to run my test blog in Netlify but I have this error below. I don't know what's happening

9:27:11 PM: error "gatsby-source-contentful" threw an error while running the setFieldsOnGraphQLNodeType lifecycle:
9:27:11 PM: Cannot find module 'gatsby-plugin-image/graphql-utils'
9:27:11 PM: Require stack:
9:27:11 PM: - /opt/build/repo/node_modules/gatsby-source-contentful/extend-node-type.js
9:27:11 PM: - /opt/build/repo/node_modules/gatsby-source-contentful/gatsby-node.js
9:27:11 PM: - /opt/build/repo/node_modules/gatsby/dist/bootstrap/load-plugins/validate.js
9:27:11 PM: - /opt/build/repo/node_modules/gatsby/dist/bootstrap/load-plugins/load.js
9:27:11 PM: - /opt/build/repo/node_modules/gatsby/dist/bootstrap/load-plugins/index.js
9:27:11 PM: - /opt/build/repo/node_modules/gatsby/dist/services/initialize.js
9:27:11 PM: - /opt/build/repo/node_modules/gatsby/dist/services/index.js
9:27:11 PM: - /opt/build/repo/node_modules/gatsby/dist/bootstrap/index.js
9:27:11 PM: - /opt/build/repo/node_modules/gatsby/dist/commands/build.js
9:27:11 PM: - /opt/build/repo/node_modules/gatsby-cli/lib/create-cli.js
9:27:11 PM: - /opt/build/repo/node_modules/gatsby-cli/lib/index.js
9:27:11 PM: - /opt/build/repo/node_modules/gatsby/dist/bin/gatsby.js
9:27:11 PM: - /opt/build/repo/node_modules/gatsby/cli.js
9:27:11 PM: 
9:27:11 PM: 
9:27:11 PM:   Error: Cannot find module 'gatsby-plugin-image/graphql-utils'
9:27:11 PM:   Require stack:
9:27:11 PM:   - /opt/build/repo/node_modules/gatsby-source-contentful/extend-node-type.js
9:27:11 PM:   - /opt/build/repo/node_modules/gatsby-source-contentful/gatsby-node.js
9:27:11 PM:   - /opt/build/repo/node_modules/gatsby/dist/bootstrap/load-plugins/validate.js
9:27:11 PM:   - /opt/build/repo/node_modules/gatsby/dist/bootstrap/load-plugins/load.js
9:27:11 PM:   - /opt/build/repo/node_modules/gatsby/dist/bootstrap/load-plugins/index.js
9:27:11 PM:   - /opt/build/repo/node_modules/gatsby/dist/services/initialize.js
9:27:11 PM:   - /opt/build/repo/node_modules/gatsby/dist/services/index.js
9:27:11 PM:   - /opt/build/repo/node_modules/gatsby/dist/bootstrap/index.js
9:27:11 PM:   - /opt/build/repo/node_modules/gatsby/dist/commands/build.js
9:27:11 PM:   - /opt/build/repo/node_modules/gatsby-cli/lib/create-cli.js
9:27:11 PM:   - /opt/build/repo/node_modules/gatsby-cli/lib/index.js
9:27:11 PM:   - /opt/build/repo/node_modules/gatsby/dist/bin/gatsby.js
9:27:11 PM:   - /opt/build/repo/node_modules/gatsby/cli.js
9:27:11 PM:   
9:27:11 PM:   - loader.js:966 Function.Module._resolveFilename
9:27:11 PM:     internal/modules/cjs/loader.js:966:15
9:27:11 PM:   
9:27:11 PM:   - loader.js:842 Function.Module._load
9:27:11 PM:     internal/modules/cjs/loader.js:842:27
9:27:11 PM:   
9:27:11 PM:   - loader.js:1026 Module.require
9:27:11 PM:     internal/modules/cjs/loader.js:1026:19
9:27:11 PM:   
9:27:11 PM:   - v8-compile-cache.js:159 require
9:27:11 PM:     [repo]/[v8-compile-cache]/v8-compile-cache.js:159:20
9:27:11 PM:   
9:27:11 PM:   - extend-node-type.js:817 getGatsbyImageData
9:27:11 PM:     [repo]/[gatsby-source-contentful]/extend-node-type.js:817:9
9:27:11 PM:   
9:27:11 PM:   - extend-node-type.js:873 Object.exports.extendNodeType [as setFieldsOnGraphQL    NodeType]
9:27:11 PM:     [repo]/[gatsby-source-contentful]/extend-node-type.js:873:22
9:27:11 PM:   
9:27:11 PM:   - api-runner-node.js:434 runAPI
9:27:11 PM:     [repo]/[gatsby]/src/utils/api-runner-node.js:434:22
9:27:11 PM:   
9:27:11 PM:   - api-runner-node.js:585 Promise.catch.decorateEvent.pluginName
9:27:11 PM:     [repo]/[gatsby]/src/utils/api-runner-node.js:585:13
9:27:11 PM:   
9:27:11 PM:   - debuggability.js:384 Promise._execute
9:27:11 PM:     [repo]/[bluebird]/js/release/debuggability.js:384:9
9:27:11 PM:   
9:27:11 PM:   - promise.js:518 Promise._resolveFromExecutor
9:27:11 PM:     [repo]/[bluebird]/js/release/promise.js:518:18
9:27:11 PM:   
9:27:11 PM:   - promise.js:103 new Promise
9:27:11 PM:     [repo]/[bluebird]/js/release/promise.js:103:10
9:27:11 PM:   
9:27:11 PM:   - api-runner-node.js:583 
9:27:11 PM:     [repo]/[gatsby]/src/utils/api-runner-node.js:583:16
9:27:11 PM:   
9:27:11 PM:   - util.js:16 tryCatcher
9:27:11 PM:     [repo]/[bluebird]/js/release/util.js:16:23
9:27:11 PM:   
9:27:11 PM:   - reduce.js:166 Object.gotValue
9:27:11 PM:     [repo]/[bluebird]/js/release/reduce.js:166:18
9:27:11 PM:   
9:27:11 PM:   - reduce.js:155 Object.gotAccum
9:27:11 PM:     [repo]/[bluebird]/js/release/reduce.js:155:25
9:27:11 PM:   
9:27:11 PM:   - util.js:16 Object.tryCatcher
9:27:11 PM:     [repo]/[bluebird]/js/release/util.js:16:23
9:27:11 PM:   
9:27:11 PM: 
9:27:11 PM: not finished building schema - 0.490s

I can run on development mode, just when I tried to put online I got this error, I have already checked this "module" I have them on "node module" on my project, I don't know why is not finding on Netlify.

This is my gatsby-config.js

{
  "name": "gatsby-starter-hello-world",
  "private": true,
  "description": "A simplified bare-bones starter for Gatsby",
  "version": "0.1.0",
  "license": "0BSD",
  "scripts": {
    "build": "gatsby build",
    "develop": "env-cmd -f .env gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "dependencies": {
    "@contentful/rich-text-react-renderer": "^14.1.3",
    "@contentful/rich-text-types": "^14.1.2",
    "formik": "^2.2.6",
    "gatsby": "^3.3.0",
    "gatsby-plugin-postcss": "^4.3.0",
    "gatsby-plugin-react-helmet": "^4.3.0",
    "gatsby-plugin-sass": "^4.3.0",
    "gatsby-plugin-sharp": "^3.3.0",
    "gatsby-remark-images": "^5.0.0",
    "gatsby-source-contentful": "^5.3.0",
    "gatsby-source-filesystem": "^3.3.0",
    "gatsby-transformer-remark": "^4.0.0",
    "node-sass": "^5.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "prettier": "2.2.1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

Thanks Neto

Answer 1

When I ran into this issue I found that adding the new package gatsby-plugin-image fixed it. The README for gatsby-source-contentful has a section that explains how to use this new plugin along with the contentful plugin. You might also need to add gatsby-plugin-sharp, as it mentions in the docs, too.

To add the new package

npm install gatsby-plugin-image gatsby-plugin-sharp

or

yarn add gatsby-plugin-image gatsby-plugin-sharp

Answer 2

Assuming that your project builds correctly locally, this kind of issue is 99% related to mismatching versions of Node, so of the build dependencies installed in the end.

Run this command:

node -v > .nvmrc

This will create a .nvmrc file in the root of your project with the Node version (node -v). Netlify, during the deploy process, will read that file and will base the Node build configuration based on that version, as you can read from the docs.