Gatsby: "There was a problem loading the local develop command" after installing gatsby-plugin-styled-components, Gatsby v2

[thundernixon]

Description

I'm trying to test styled-components in the latest Gatsby v2, but as soon as I follow the installation instructions on the gatsby-plugin-styled-components page, but it breaks the gatsby-CLI.

Steps to reproduce

1. Install Gatsby CLI and Gatsby v2 as instructed at https://next.gatsbyjs.org/docs/
2. Check that the site is building by running gatsby develop in the terminal. All good so far.
3. Install gatsby-plugin-styled-components as instructed at https://next.gatsbyjs.org/packages/gatsby-plugin-styled-components/?=
4. Run gatsby develop in the terminal again. The result is now:

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

This error happens whether or not I place gatsby-plugin-styled-components into the gatsby-config.js. A very similar error happens for gatsby build.

Expected result

I expected to have the site build, so I could try Styled Components in v2. So far, no luck.

Environment

  System:
    OS: macOS High Sierra 10.13.3
    CPU: x64 Intel(R) Core(TM) i7-4960HQ CPU @ 2.60GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.8.0 - /usr/local/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.2.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 67.0.3396.99
    Safari: 11.0.3
  npmPackages:
    gatsby-plugin-styled-components: ^2.0.11 => 2.0.11
  npmGlobalPackages:
    gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'gatsby-starter-default',
        short_name: 'starter',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
      },
    },
    'gatsby-plugin-offline',
    'gatsby-plugin-styled-components'
  ],
}

package.json

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "babel-plugin-styled-components": "^1.5.1",
    "gatsby": "next",
    "gatsby-plugin-manifest": "next",
    "gatsby-plugin-offline": "next",
    "gatsby-plugin-react-helmet": "next",
    "gatsby-plugin-styled-components": "^2.0.11",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-helmet": "^5.2.0",
    "styled-components": "^3.4.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write '**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.13.7"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  }
}

gatsby-node.js: the default on gatsby-starter-default#v2
gatsby-browser.js: the default on gatsby-starter-default#v2
gatsby-ssr.js: the default on gatsby-starter-default#v2

---

Hopefully I've just missed something obvious, but I've done it twice, so I think it's something outside of what I'm doing. Thanks for any help in resolving this!

[LekoArts]

No other error? Do you have a repository for reproducing the error?

The offline plugin should be placed at the end of the config file, try changing that

[KyleAMathews]

Try running "npm install --force"

[thundernixon]

Thanks for the suggestions!

I've put this in a repo at https://github.com/thundernixon/gatsby_v2-styled_comp-test

I've tried npm install --force, but so far, I'm still getting the same result. I assume gatsby-cli is what I might need to force install, correct?

[KyleAMathews]

No, in your site's directory. Something removed gatsby from your site's node_modules directory so you need to add it back.

[thundernixon]

Oh, huh, sure enough, that fixed it. I misinterpreted the error message. Thanks!

I wonder how installing the styled-components plugin removed gatsby and gatsby-plugin-react-helmet from the directory... 🤔

In any case:

Steps to fix the error

1. Ran npm install gatsby
2. Ran gatsby develop, then received the following error: Error: Unable to find plugin "gatsby-plugin-react-helmet". Perhaps you need to install its package?
3. Ran npm install gatsby-plugin-react-helmet
4. Ran gatsby develop, which worked this time.

[Strangehill]

I got to this error in the same manner and was only able to solve it by using yarn instead of npm --- a solution I found at a comment to similar issue #6834 so I'm adding here for reference.

[MTyson]

I ran into this after installing the background plugin. Using yarn instead of npm fixed there also.

[remyjimjim]

I was getting this error even after I'd installed Gatsby, to fix I just deleted the node-modules directory and re-ran npm install.