gatsby-plugin-image not installing via npm

Question

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!

score 7 · Accepted Answer · answered Mar 06 '21 at 08:12

7

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

answered Mar 06 '21 at 08:12

Ferran Buireu

28,630
6
39
67

2

The first solution did not work but the alternative did give success msg in terminal. I'll update if anything is broken but this seems to have fixed the issue. Thanks so much Ferran! – Jon Deavers Mar 07 '21 at 16:01
After running all three of these npm commands, the gatsby develop command resulted in an error "cannot resolve react-is in node_modules". Ran `npm i react-is` and the development server spun up without issue. FYI for anyone else that runs into this. – Jon Deavers Mar 07 '21 at 16:08

gatsby-plugin-image not installing via npm

1 Answers1