The Gatsby Example is broken

[hhimanshu]

I am trying to make gatsby and material-ui work together.
I used https://github.com/mui-org/material-ui/tree/master/examples/gatsby and followed the instructions.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

➜  exp curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/gatsby

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 12.4M  100 12.4M    0     0  2728k      0  0:00:04  0:00:04 --:--:-- 3277k
➜  exp cd gatsby
➜  gatsby ll
total 24
-rw-r--r--  1 harit  staff   641B  4 Nov 07:02 README.md
-rw-r--r--  1 harit  staff   512B  4 Nov 07:02 gatsby-config.js
-rw-r--r--  1 harit  staff   424B  4 Nov 07:02 package.json
drwxr-xr-x  3 harit  staff    96B  4 Nov 07:02 plugins
drwxr-xr-x  5 harit  staff   160B  4 Nov 07:02 src
➜  gatsby npm install
npm run develop
npm WARN deprecated core-js@1.2.7: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.

> fsevents@1.2.9 install /Users/harit/code/js/exp/gatsby/node_modules/fsevents
> node install

node-pre-gyp WARN Using needle for node-pre-gyp https download
[fsevents] Success: "/Users/harit/code/js/exp/gatsby/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64/fse.node" is installed via remote

> core-js@2.6.10 postinstall /Users/harit/code/js/exp/gatsby/node_modules/core-js
> node postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> gatsby-telemetry@1.1.35 postinstall /Users/harit/code/js/exp/gatsby/node_modules/gatsby-telemetry
> node src/postinstall.js


> gatsby-cli@2.8.8 postinstall /Users/harit/code/js/exp/gatsby/node_modules/gatsby/node_modules/gatsby-cli
> node scripts/postinstall.js


> gatsby@2.17.7 postinstall /Users/harit/code/js/exp/gatsby/node_modules/gatsby
> node scripts/postinstall.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN ts-pnp@1.1.4 requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.

added 1717 packages from 780 contributors and audited 20012 packages in 28.555s
found 0 vulnerabilities


> gatsby@4.0.0 develop /Users/harit/code/js/exp/gatsby
> gatsby develop


 ERROR #10226  CONFIG

Couldn't find the "gatsby-plugin-top-layout" plugin declared in "/Users/harit/code/js/exp/gatsby/gatsby-config.js".

Tried looking for a local plugin in /Users/harit/code/js/exp/gatsby/plugins/gatsby-plugin-top-layout.

Tried looking for an installed package in the following paths:
 - /Users/harit/code/js/exp/gatsby/node_modules/gatsby/dist/bootstrap/load-themes/node_modules/gatsby-plugin-top-layout
 - /Users/harit/code/js/exp/gatsby/node_modules/gatsby/dist/bootstrap/node_modules/gatsby-plugin-top-layout
 - /Users/harit/code/js/exp/gatsby/node_modules/gatsby/dist/node_modules/gatsby-plugin-top-layout
 - /Users/harit/code/js/exp/gatsby/node_modules/gatsby/node_modules/gatsby-plugin-top-layout
 - /Users/harit/code/js/exp/gatsby/node_modules/gatsby-plugin-top-layout
 - /Users/harit/code/js/exp/node_modules/gatsby-plugin-top-layout
 - /Users/harit/code/js/node_modules/gatsby-plugin-top-layout
 - /Users/harit/code/node_modules/gatsby-plugin-top-layout
 - /Users/harit/node_modules/gatsby-plugin-top-layout
 - /Users/node_modules/gatsby-plugin-top-layout
 - /node_modules/gatsby-plugin-top-layout

not finished open and validate gatsby-configs - 0.053s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gatsby@4.0.0 develop: `gatsby develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gatsby@4.0.0 develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/harit/.npm/_logs/2019-11-04T15_56_15_824Z-debug.log
➜  gatsby

Expected Behavior 🤔

The project should have been running

Steps to Reproduce 🕹

Steps:

curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/gatsby
npm install
npm run develop

Context 🔦

I want to work with gatsby and material-ui together for my project

Your Environment 🌎

Tech	Version
Material-UI	as per repo package.json
React	as per repo package.json
Browser	Chrome (but does not matter in this case)
TypeScript	as per repo package.json
etc.	N/A

[oliviertassinari]

It seems to be a regression from gatsbyjs/gatsby#19150.

[oliviertassinari]

There is a simple workaround (missing index.js), I suggest we wait till the end of the week so we know the direction Gatsby takes: 1. fix the regression or 2. update the documentation to mention the index.js (I would bet it will be 1, but who knows).

[hhimanshu]

Sure, this can wait. However, the larger issue (and the reason I was trying this example) is documented at #18197. This is a blocking issue for developers working with Material-UI and Gatsby.
Your help is greatly appreciated @oliviertassinari