gatsby develop is not working after npm install

[muhammad-ammar]

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 react-typography@0.16.13 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 gatsby-plugin-typography@1.7.19 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.

+ react-typography@0.16.13
+ typography@0.16.17
+ gatsby-plugin-typography@1.7.19
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

1. gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world#v2
2. cd tutorial-part-two
3. npm install --save gatsby-plugin-typography react-typography typography
4. 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:

module.exports = {
  plugins: [`gatsby-plugin-typography`],
}

package.json:

{
"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

[johnaoss]

@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?

[muhammad-ammar]

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

[johnaoss]

👍 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.

[muhammad-ammar]

@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.

[Chuloo]

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. 😄

[muhammad-ammar]

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?

[m-allanson]

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.

[Chuloo]

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.

[johnaoss]

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.

[pieh]

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

[sambaines]

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.

[KyleAMathews]

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

[sambaines]

@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.

[johnaoss]

Is installing gatsby-cli@next required?

[muhammad-ammar]

And now I am facing #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.

[m-allanson]

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 #1545

[brianrc]

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

[transf3r]

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?

[m-allanson]

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.

[Juljan]

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...

[DanielRuf]

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.

[Juljan]

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 :

> sharp@0.21.3 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 ?

[DanielRuf]

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]

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

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

[DanielRuf]

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

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

[Juljan]

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]

[DanielRuf]

Well you might want to install it then ;-)
Also see libvips/libvips#1143 and libvips/libvips#1142

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

[Juljan]

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 :-)

[DanielRuf]

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.

[cmosguy]

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

[DanielRuf]

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?

[FilipeNMarques]

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! :)

[pvpg]

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 !!!

[bradydowling]

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.

[ryancwalsh]

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.

[dlbnco]

For those who were already using yarn, try deleting yarn.lock and then running yarn.

[eussam]

Ran into the same problem, could manage by installing first:

npm install gatsby@"^3.0.0-next.0" 

then:

npm install gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion @emotion/react

[DoubleMarv]

Reinstating the package.lock file and running
yarn
helped me here. I moved my project from one machine to another and I guess I am using yarn on the second one and not the first

[Jaimesanchezgalvis]

in my case I started installing with yarn and that's why I had the error to be able to install it I did it like this:

yarn add install gatsby-plugin-typography react-typography typography

I hope someone finds it useful