gatsby develop is not working after npm install

Created on 28 Jul 2018 · 37Comments · Source: gatsbyjs/gatsby

Description

I was following tutorial at https://next.gatsbyjs.org/tutorial/part-two/#gatsby-plugins but
gatsby develop is not working as expected after the below npm install command

npm install --save gatsby-plugin-typography react-typography typography

gatsby develop command work as expected before the above command.

I am getting the below error when I run gatsby develop command

error There was a problem loading the local develop command. Gatsby may not be installed. Perhaps you need to run "npm install"?

Output of the npm install --save gatsby-plugin-typography react-typography typography

npm WARN rm not removing /Users/mammar/Documents/gatsby/site/tutorial-part-two/node_modules/.bin/gatsby as it wasn't installed by /Users/mammar/Documents/gatsby/site/tutorial-part-two/node_modules/gatsby
npm WARN rm not removing /Users/mammar/Documents/gatsby/site/tutorial-part-two/node_modules/.bin/browserslist as it wasn't installed by /Users/mammar/Documents/gatsby/site/tutorial-part-two/node_modules/browserslist
npm WARN rm not removing /Users/mammar/Documents/gatsby/site/tutorial-part-two/node_modules/.bin/regjsparser as it wasn't installed by /Users/mammar/Documents/gatsby/site/tutorial-part-two/node_modules/regjsparser
npm WARN rm not removing /Users/mammar/Documents/gatsby/site/tutorial-part-two/node_modules/.bin/jsesc as it wasn't installed by /Users/mammar/Documents/gatsby/site/tutorial-part-two/node_modules/jsesc
npm WARN rm not removing /Users/mammar/Documents/gatsby/site/tutorial-part-two/node_modules/fsevents/node_modules/.bin/node-pre-gyp as it wasn't installed by /Users/mammar/Documents/gatsby/site/tutorial-part-two/node_modules/fsevents/node_modules/node-pre-gyp
npm WARN rm not removing /Users/mammar/Documents/gatsby/site/tutorial-part-two/node_modules/@babel/preset-env/node_modules/.bin/browserslist as it wasn't installed by /Users/mammar/Documents/gatsby/site/tutorial-part-two/node_modules/@babel/preset-env/node_modules/browserslist
npm WARN rm not removing /Users/mammar/Documents/gatsby/site/tutorial-part-two/node_modules/.bin/babylon as it wasn't installed by /Users/mammar/Documents/gatsby/site/tutorial-part-two/node_modules/babylon
npm WARN rm not removing /Users/mammar/Documents/gatsby/site/tutorial-part-two/node_modules/babel-template/node_modules/.bin/babylon as it wasn't installed by /Users/mammar/Documents/gatsby/site/tutorial-part-two/node_modules/babel-template/node_modules/babylon
npm WARN rm not removing /Users/mammar/Documents/gatsby/site/tutorial-part-two/node_modules/@babel/generator/node_modules/.bin/jsesc as it wasn't installed by /Users/mammar/Documents/gatsby/site/tutorial-part-two/node_modules/@babel/generator/node_modules/jsesc
npm WARN [email protected] requires a peer of react@^0.14.0 || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of gatsby@^1.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN gatsby-starter-hello-world@ No repository field.

+ [email protected]
+ [email protected]
+ [email protected]
added 11 packages from 6 contributors, removed 1454 packages, updated 6 packages and audited 34 packages in 22.085s
found 0 vulnerabilities

Steps to reproduce

gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world#v2
cd tutorial-part-two
npm install --save gatsby-plugin-typography react-typography typography
gatsby develop

Expected result

gatsby should start the built-in development server

Actual result

error There was a problem loading the local develop command. Gatsby may not be installed. Perhaps you need to run "npm install"?

Environment

  System:
     OS: OS X El Capitan 10.11.5
    CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 5.0.8 - /bin/zsh
  Binaries:
    Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
    Yarn: 1.3.2 - /usr/local/bin/yarn
    npm: 6.1.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
  Browsers:
    Chrome: 67.0.3396.99
    Safari: 9.1.1
  npmPackages:
    gatsby-plugin-typography: ^1.7.19 => 1.7.19 
  npmGlobalPackages:
    gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js:
js module.exports = { plugins: [`gatsby-plugin-typography`], }
package.json:
```js
{
"name": "gatsby-starter-hello-world",
"description": "Gatsby hello world starter",
"license": "MIT",
"scripts": {
"develop": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve"
},
"dependencies": {
"gatsby": "next",
"gatsby-plugin-typography": "^1.7.19",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-typography": "^0.16.13",
"typography": "^0.16.17"
}
}

``gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js`: N/A

help wanted bug

Source

muhammad-ammar

👍5

Most helpful comment

Anyone who has stumbled up upon this issue DO NOT USE npm USE yarn, don't waste your time!

cmosguy on 29 May 2019

👍15 😕5

All 37 comments

@muhammad-ammar My hunch is that you may have unsatisfied peer dependencies, could you try running npm install after and seeing if that works?

Are there any specific warnings given when running npm install --save gatsby-plugin-typography react-typography typography?

johnaoss on 28 Jul 2018

👍8 🎉4 ❤2

@johnaoss sorry, I missed the output of npm install --save gatsby-plugin-typography react-typography typography. Now updated the issue with that output.

muhammad-ammar on 28 Jul 2018

👍 No worries! Looks like the problem is that your package.json most likely relies on gatsby-plugin-typography v1.7.19 instead of the 2.0 releases.

For now, you can solve it by replacing "gatsby-plugin-typography": "^1.7.19" with "gatsby-plugin-typography": "^2.2.0-beta.3" in your package.json, and rerunning npm install.

johnaoss on 28 Jul 2018

@johnaoss npm install may fix the issue but I am more interested in why I am getting the issue in first place? To me it looks like that npm install --save gatsby-plugin-typography react-typography typography removed some of the dependencies due to which gatsby develop failed.

muhammad-ammar on 28 Jul 2018

Hi, @muhammad-ammar did you fix it with npm install? Ran into the same issue... had to install Webpack and a bunch of other missing dependencies to get it working. Would like to know if you got it fixed and how. 😄

Chuloo on 30 Jul 2018

Hi @Chuloo, I switched to yarn and it solved the issue. Instead of npm install --save gatsby-plugin-typography react-typography typography, execute yarn add gatsby-plugin-typography react-typography typography.

But this is not good as I still don't know why the npm is not working and why the yarn is working?

muhammad-ammar on 30 Jul 2018

👍5 👀1

This _could_ be due to a mix of using Gatsby v2 with Gatsby v1 plugins. If that's the case, we should probably update the docs to make it clear how and when to install v2 plugins.

m-allanson on 30 Jul 2018

👍5

Good to note that using this starter https://github.com/gatsbyjs/gatsby-starter-default#v2 doesn't throw an error. This does https://github.com/gatsbyjs/gatsby-starter-hello-world#v2
Here's a reproduction.

Chuloo on 30 Jul 2018

👍2 🎉1

gatsby new test https://github.com/gatsbyjs/gatsby-starter-default#v2
cd test/
npm install --save gatsby-plugin-typography@next react-typography typography
gatsby develop

Failed with the same error as before on next and master however gatsby info leads to some really interesting results.

Before I install the plugin, my important gatsby info looks like this:

  npmPackages:
    gatsby: next => 2.0.0-beta.61
    gatsby-plugin-react-helmet: next => 3.0.0-beta.4
  npmGlobalPackages:
    gatsby-cli: 1.1.58

After installing:

  npmPackages:
    gatsby-plugin-typography: ^2.2.0-beta.3 => 2.2.0-beta.3
  npmGlobalPackages:
    gatsby-cli: 1.1.58

After uninstalling using npm remove --save gatsby-plugin-typography I get info identical to as before installation, but the real interesting part is when I reinstall it using npm install --save gatsby-plugin-typography@next which gives me the following:

  npmPackages:
    gatsby: next => 2.0.0-beta.61
    gatsby-plugin-react-helmet: next => 3.0.0-beta.4
    gatsby-plugin-typography: ^2.2.0-beta.3 => 2.2.0-beta.3
  npmGlobalPackages:
    gatsby-cli: 1.1.58

It's also worth noting that gatsby develop functions properly after the reinstallation.

johnaoss on 31 Jul 2018

👍1

I think the problem here is that initial starter setup is done with yarn and installing packages after that with npm prunes some packages (including gatsby).

It's also very interesting stuff that @johnaoss pointed out - just running npm remove --save gatsby-plugin-typography will actually reinstall gatsby

pieh on 31 Jul 2018

I had a lot of similar issues recently and also found that running yarn as the package manager would sort most of this out - but it didn't solve the actually issue everyone is talking about.

The problem many of you are having is that you are installing the V2 starters but not V2 plugins or Gatsby V2 which then causes these issues (I know this as I have installed everything more times than I can count in the last 3 days).

For example you need to make sure when you install gatsby-cli that you actually install it as gatsby-cli@next if you are wanting to use V2 starters - the @next tag makes sure you are installing the latest versions I believe - so then the same with the plugins. For example I wanted to use Sass so installed gatsby-plugin-sass@next along with the node-sass dependency and it solved the issues above.

For me this could be fixed by updating the docs to specify that you need to use the @next tag as nowhere does it make this clear.

sambaines on 6 Aug 2018

👍1

For me this could be fixed by updating the docs to specify that you need to use the @next tag as nowhere does it make this clear.

We do cover this in the migration guide:

https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/#update-gatsby-related-packages

KyleAMathews on 6 Aug 2018

👍2

@KyleAMathews sorry I missed that in the docs Kyle. That makes more sense but I didn't even look at the migrating guide, I just started with the V2 docs tutorial and that's where the confusion comes from as there is not mention of the @next tag in there.

sambaines on 6 Aug 2018

👍1

Is installing gatsby-cli@next required?

johnaoss on 13 Aug 2018

And now I am facing https://github.com/gatsbyjs/gatsby/issues/5774

After trying lots of this and that, I realised that the best option is to stick with Gatsby V1 until dependencies/plugins are fixed for Gatsby V2.

muhammad-ammar on 13 Aug 2018

This is caused by the same thing as #6844. I'm going to close this as a duplicate.

The ultimate fix would be to implement https://github.com/gatsbyjs/gatsby/issues/1545

m-allanson on 29 Aug 2018

Just ran into the same issue working on Gatsby v2. Why can't this be fixed?

brianrc on 16 Nov 2018

👍4

Something this major still not fixed? This is in the Gatsby tutorial - every developer who tries to learn Gatsby is going to stumble over this. And being new to Gatsby and relatively new to React, the "fixes" above just confuse me. I don't really want to start down a rabbit hole of trying to fix broken tutorials and dependency and yarn/npm hell when I don't fully understand what/why. What a nightmare! Can Gatsby be used to develop real apps?

As noted above, the steps indicated in the tutorial at: https://www.gatsbyjs.org/tutorial/part-two/ are:

gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-two
npm install --save gatsby-plugin-typography react-typography typography
gatsby develop

Do I just use yarn instead of npm in the above command? Is the rest of the command line the same? Is the rest of the tutorial going to work? Should I revert to the previous gatsby version? How? It's pretty bad if hello world doesn't work!

ericsolberg on 11 Dec 2018

👍13

I'm in the same boat, keep getting errors "Can't resolve 'gatsby-link" when trying to start up hello world tutorials. Really keen to look into it, but am struggling to get it of the ground. Surely the starting point should be solid. I've spent over a day trying to track down why.

Should Gatsby v1 be used instead?

transf3r on 25 Jan 2019

👍1

Hey @transf3r could you open a new issue describing the problems you're seeing? If you can follow the issue template (in particular running gatsby info to provide some debug info) we can try to get you up and running. Feel free to mention @m-allanson in that issue.

We put a ton of work into trying to make the tutorial work smoothly for as many people as possible, so I'd love to figure out if there's a problem we've missed.

@ericsolberg similarly could you open a new issue if you're still seeing this problem? I was able to run the steps you listed without errors.

m-allanson on 25 Jan 2019

Hello,
I'm discovering Gatsby through the tutorials and I'm also stuck with that issue, I do not understand why it is marked as Closed.
After spending hours on it I deleted my node_modules folder and tried npm install. Then I had to solve issues with the python executable during npm install and now I'm still stuck with a shady npm error "Cannot find module 'detect-libc'. Should it be added to the dev dependencies ?

Why the hell is it so complicated to get things working ? 100% agree with @ericsolberg...

Juljan on 23 Feb 2019

👍2

After spending hours on it I deleted my node_modules folder and tried npm install. Then I had to solve issues with the python executable during npm install and now I'm still stuck with a shady npm error "Cannot find module 'detect-libc'. Should it be added to the dev dependencies ?

Please provide the full output.
Are you on Windows or another OS? Python is needed by Node / node-gyp.

DanielRuf on 23 Feb 2019

It's from à Docker container, the host is Windows 10 Pro 64bits

Dockerfile :

FROM node:8-alpine

RUN apk update && \
    apk upgrade && \
    apk add git

WORKDIR /app

docker-compose.yml :

version: '3'
services:
  gatsby:
    container_name: gatsby
    build:
      #Above Dockerfile is in that folder
      context: ./frontend
    working_dir: /app
    volumes:
      - ./frontend:/app
    ports:
     - 8000:8000

docker-compose build gatsby -> ok
docker-compose run --service-ports gatsby sh, then, all following commands are from the container shell :
npx gatsby new myapp https://github.com/gatsbyjs/gatsby-starter-default -> OK, just a git commit "Initial commit" failed at the end
npm run develop -- --host=0.0.0.0 -> OK (can browse the Gatsby app via localhost:8000, everything is fine)

I completely broke my setup after the command from the docker instance :

npm install --save gatsby-plugin-typography react-typography typography

Output :

> [email protected] install /app/myapp/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

module.js:550
    throw err;
    ^

Error: Cannot find module 'detect-libc'
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/app/myapp/node_modules/sharp/install/libvips.js:7:20)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:484:19)
gyp ERR! stack     at PythonFinder.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:406:16)
gyp ERR! stack     at F (/usr/local/lib/node_modules/npm/node_modules/which/which.js:68:16)
gyp ERR! stack     at E (/usr/local/lib/node_modules/npm/node_modules/which/which.js:80:29)
gyp ERR! stack     at /usr/local/lib/node_modules/npm/node_modules/which/which.js:89:16
gyp ERR! stack     at /usr/local/lib/node_modules/npm/node_modules/isexe/index.js:42:5
gyp ERR! stack     at /usr/local/lib/node_modules/npm/node_modules/isexe/mode.js:8:5
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:152:21)
gyp ERR! System Linux 4.9.125-linuxkit
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /app/myapp/node_modules/sharp
gyp ERR! node -v v8.15.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok

The server cannot be started anymore after that :

success open and validate gatsby-configs — 0.085 s
error Unable to find plugin "gatsby-transformer-sharp". Perhaps you need to install its package?


  Error: Unable to find plugin "gatsby-transformer-sharp". Perhaps you need to install its package?

And npm install command fails ...

If the npx command for the initial setup worked, there should be a solution to restore the site in a working state, isn't it ?

Juljan on 23 Feb 2019

Regarding the libc issue, please open a new issue at lovell/sharp:
https://github.com/lovell/sharp/blob/master/install/libvips.js#L7
https://github.com/lovell/sharp/blob/master/package.json#L98

Can't find Python executable "python", you can set the PYTHON env variable.

Please do install Python 2 on the container and run npm config set python /path/to/executable/python2.7 or npm config set python python27.

This is a node-gyp issue.
See https://www.npmjs.com/package/node-gyp

So this is not an issue caused by Gatsby but missing (system) dependencies.

DanielRuf on 23 Feb 2019

error Unable to find plugin "gatsby-transformer-sharp"

This is because the node-gyp step failed due to the missing Python 2.

DanielRuf on 23 Feb 2019

https://github.com/lovell/sharp/search?q=detect-libc+is%3Aissue&type=Issues
https://github.com/lovell/sharp/issues/630

Try RUN apk add vips-dev -q --no-progress --no-cache --repository http://nl.alpinelinux.org/alpine/edge/testing

DanielRuf on 23 Feb 2019

The latest command gave output :

apk add vips-dev -q --no-progress --no-cache --repository http://nl.alpinelinux.org/alpine/edge/testing
ERROR: unsatisfiable constraints:
  pc:fftw3 (missing):
    required by: vips-dev-8.7.4-r1[pc:fftw3] vips-dev-8.7.4-r1[pc:fftw3] vips-dev-8.7.4-r1[pc:fftw3]

Juljan on 24 Feb 2019

Well you might want to install it then ;-)
Also see https://github.com/libvips/libvips/issues/1143 and https://github.com/libvips/libvips/issues/1142

Every project has its own issue tracker and they contain the answers.

DanielRuf on 24 Feb 2019

I did that and the next issue with a missing module 'detect-libc' ...

After spending the afternoon on this issue, I (randomly) tried to build using yarn instead of npm and it worked. My gatsby setup was repaired, even on a fresh docker node:8 image without python (only git).

The typography package installation worked with yarn while it has been a nightmare with npm.

This is a good news but also a bad, because I have a new build system to learn with yarn.

I'd advise to update this page of the tutorial :
https://www.gatsbyjs.org/tutorial/part-three/
by replacing the command npm install --save gatsby-plugin-typography react-typography typography to the yarn equivalent yarn add gatsby-plugin-typography react-typography typography

Thanks you @DanielRuf for the help :-)

Juljan on 24 Feb 2019

👍5

I did that and the next issue with a missing module 'detect-libc' ...

This is still an issue with sharp / libvips and not Gatsy itself.
As I already wrote, please check the linked issues. Other sharp / libvips users had the same issues and provided solutions.

Yarn resolves the dependencies differently than npm does, especially if there are lockfiles.
Most people use npm. Changing the docs does not make much sense imo as this is not a direct issue with the used package manager.

Yarn is not much different but better in many parts.

DanielRuf on 24 Feb 2019

Anyone who has stumbled up upon this issue DO NOT USE npm USE yarn, don't waste your time!

cmosguy on 29 May 2019

👍15 😕5

Anyone who has stumbled up upon this issue _DO NOT USE_ npm _USE_ yarn, don't waste your time!

Well, there are cases where Yarn is better (and this and other ones are just an example why we have switched to Yarn for all projects).

Not sure what the exact issue in npm is. So far I see no linked issue.
Should we invest some time and find some more info about this?

DanielRuf on 29 May 2019

Hi @Chuloo, I switched to yarn and it solved the issue. Instead of npm install --save gatsby-plugin-typography react-typography typography, execute yarn add gatsby-plugin-typography react-typography typography.

But this is not good as I still don't know why the npm is not working and why the yarn is working?

Thank you man, works for me! :)

FilipeNMarques on 14 Jul 2019

👍3

For me the issue was that i was mixing yarn and npm.

I restored the deleted files from my packaje-lock.json
then runned _yarn_

That solved it for me !!!

PaulinaVPG on 1 Nov 2019

Is the solution to this really to switch from npm to yarn? Seems like that's just a workaround that might not always be desirable since it can probably cause issues for some people.

bradydowling on 27 Jan 2020

👍4 😕1

I'm on a Windows 10 PC running a Laravel Homestead Vagrant Ubuntu VM, where I've been installing the tutorial. (So I also had to map port 8000 to 8000 in Homestead.yaml.)

I'm trying to learn Gatsby. I skipped to https://www.gatsbyjs.org/tutorial/part-four/#data-in-gatsby (but then went back to parts 1-3 and had similar problems).

It's surprising that the tutorials don't work, as people have said above.

Finally, after finding this issue/ticket, I was able to get things working by using yarn instead of npm:

yarn install
yarn add --save gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion @emotion/core
gatsby develop --host=0.0.0.0

I now am able to see pandas at http://localhost:8000/

I think someone should update the docs to prevent new people wanting to learn Gatsby from wasting a lot of time being frustrated not even getting the tutorial to load.

But overall, thanks for the very good looking tutorial and a framework that looks very promising.