gatsby: gatsby develop is not working after npm install

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

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 6
  • Comments: 40 (16 by maintainers)

Most upvoted comments

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

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

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!

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.

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?

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 😃

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.

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

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

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.

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

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?

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

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.

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

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.

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.