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.
➜ 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 [email protected]: 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.
> [email protected] 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
> [email protected] 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 -)
> [email protected] postinstall /Users/harit/code/js/exp/gatsby/node_modules/gatsby-telemetry
> node src/postinstall.js
> [email protected] postinstall /Users/harit/code/js/exp/gatsby/node_modules/gatsby/node_modules/gatsby-cli
> node scripts/postinstall.js
> [email protected] 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 [email protected] 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 [email protected] 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
> [email protected] 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! [email protected] develop: `gatsby develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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
The project should have been running
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
I want to work with gatsby
and material-ui
together for my project
| 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 |
It seems to be a regression from https://github.com/gatsbyjs/gatsby/issues/19150.
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).
Sure, this can wait. However, the larger issue (and the reason I was trying this example) is documented at https://github.com/mui-org/material-ui/issues/18197. This is a blocking issue for developers working with Material-UI and Gatsby.
Your help is greatly appreciated @oliviertassinari