gatsby-plugin-image not installing via npm

I am trying to install gatsby-plugin-image via npm per the documentation https://www.gatsbyjs.com/plugins/gatsby-plugin-image#installation

Receiving the following errors in terminal:

$ npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: gatsby-starter-hello-world@0.1.0
npm ERR! Found: gatsby@2.32.9
npm ERR! node_modules/gatsby
npm ERR!   gatsby@"^2.26.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby@"^3.0.0-next.0" from gatsby-plugin-image@1.0.0
npm ERR! node_modules/gatsby-plugin-image
npm ERR!   gatsby-plugin-image@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Package.json is from the hello world starter in the gatsby starter library:

{
  "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": "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": {
    "babel-plugin-styled-components": "^1.12.0",
    "gatsby": "^2.26.1",
    "gatsby-plugin-styled-components": "^3.10.0",
    "gatsby-source-filesystem": "^2.11.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "styled-components": "^5.2.1"
  },
  "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"
  }
}

I did not see any issues relating to this in the GH repo or via Google search. Have tried the troubleshooting tips at https://www.gatsbyjs.com/docs/how-to/local-development/troubleshooting-common-errors/ with no success. Have no experience with running npm installs using --force. Is there something I should keep an eye out for? Will I be able to revert this if I force install? Thanks in advance!

Solution

It seems that you are using npm v7 so the command that will work for you, according to the docs, is:

npm install gatsby@latest --legacy-peer-deps

Then, you will be able to run:

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

Alternatively, you can try adding the legacy peer dependencies to them by:

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp --legacy-peer-deps