Gatsby: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

[SurajVerma]

Description

I am trying to setup a Gatsby site using Gatsby blog theme starter, everything works as expected, till the time I run gatsby develop

Steps to reproduce

Run below commands, which i picked from Gatsby official documentation

gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme
cd my-blog
gatsby develop

here is the link to my git repo : my-blog

Expected result

As per the documentation, I am supposed to get below page:

Actual result

But I am getting this:

Environment

  System:
    OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i5-4210U CPU @ 1.70GHz
    Shell: 5.0.16 - /bin/bash
  Binaries:
    Node: 14.3.0 - ~/.nvm/versions/node/v14.3.0/bin/node
    npm: 6.14.5 - ~/.nvm/versions/node/v14.3.0/bin/npm
  Browsers:
    Chrome: 83.0.4103.106
    Firefox: 77.0.1
  npmPackages:
    gatsby: ^2.23.3 => 2.23.3 
    gatsby-theme-blog: ^1.6.42 => 1.6.42 
  npmGlobalPackages:
    gatsby-cli: 2.12.46

[jbuget]

I had the same this morning. The problem was that I did not have yarn installed (only NPM).

I think the problem is due to a problem with the two dependencies theme-ui and a second one that I can not remember the name.

[laurieontech]

Thanks for opening this issue! At the moment, I'm unable to reproduce the error you're seeing. You noted a link to your specific repo, but I don't believe it's linked. Would you be able to add that?

[SurajVerma]

@jbuget : I too didn't have yarn installed.
@laurieontech: Sorry, updated now.

[laurieontech]

Wonderful, was able to reproduce. npm and yarn should both work, so I'll dig into this.

[laurieontech]

To add context, the underlying bug is that there are two different theme-ui versions in the current gatsby monorepo. For some odd reason, npm resolves to the bad one and yarn resolves to the good one.

This should be resolved in the latest Gatsby release but the starter is picking up the version before that. Will get a new release published shortly.

[laurieontech]

Unfortunately the fix did not solve the problem. So continuing to work on this unmet peer dependency issue (only in npm).

[SurajVerma]

As @jbuget pointed out, I tried yarn and it is working if I am doing following:

gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme
cd my-blog
yarn
gatsby develop

[laurieontech]

Understood. This is definitely only an issue with npm.