gatsby newのあとgatsby developがうまくいきません。

Question

うまく行かなかったこと

Gatsby　starterを使ってサイト構築をしようとしています。
サイト構築の後、gatsby develop で、開発サーバーでの表示を確認しようとしたところ、うまくいきませんでした。

• 使用しているスターター

https://www.gatsbyjs.com/starters/thundermiracle/gatsby-startbootstrap-agency

• node

nodebrewで管理しています。
nodeバージョン　：　14.13.1
which node : /Users/sonhongsu/.nodebrew/current/bin/node

表示されているエラー

１つ目

• エラーメッセージ

warn You can't use childImageSharp together with NavBar.en.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined

このタイプのメッセージが沢山出ます。
NavBar.en.mdの部分がいろいろなファイルで１８個くらい出てきます。

• 調べてみたこと

childImageSharpは///mdファイルと一緒には使えない。
childImageSharpというプラグイン（？）には画像ファイルを渡さないとだめということかなあと
考えたのですがどうすればいいのかよくわからない状況です。

２つ目

• エラーメッセージ

ERROR #98124 WEBPACK

Generating development SSR bundle failed

Can't resolve 'core-js/modules/web.dom.iterable.js' in '/Users/sonhongsu/horumont-portfolio/.cache'

If you're trying to use a package make sure that 'core-js/modules/web.dom.iterable.js' is installed. If you're trying to use a local file make sure that the path is correct.

File: .cache/loader.js

こちらも同じようなものが、６個出ています。

• 調べてみたこと、やってみたこと

パッケージの依存関係が問題なのかと考えました。

READMEを読んでみると

How to use
This project is using yarn as the package manager. You have to set yarn as Gatsby-cli's package manager first.

https://www.gatsbyjs.com/docs/glossary/yarn/#using-yarn-as-your-gatsby-package-manager

npm install -g gatsby-cli

gatsby new my-blog-folder https://github.com/thundermiracle/gatsby-startbootstrap-agency

とあったので、yarnを優先的に使う設定をしてから、プロジェクトを削除して、
もう一度　gatsby newをやってみましたが、同じ結果になりました。

現在の状況は以上です。
少し多くなりますが、エラーメッセージの全ては、この下に入れておきます。
どうぞよろしくおねがいします。

sonhongsu@sonhirokinoMacBook-Pro horumont-portfolio % [master]
sonhongsu@sonhirokinoMacBook-Pro horumont-portfolio % gatsby develop [master]
success open and validate gatsby-configs - 0.083s
success load plugins - 0.816s
success onPreInit - 0.033s
success initialize cache - 0.033s
success copy gatsby files - 0.065s
success onPreBootstrap - 0.018s
success createSchemaCustomization - 0.013s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.309s
success building schema - 0.411s
info Total nodes: 139, SitePage nodes: 3 (use --verbose for breakdown)
success createPages - 0.037s
success Checking for changed pages - 0.001s
success createPagesStatefully - 0.053s
success update schema - 0.030s
success write out redirect data - 0.004s
success Build manifest and related icons - 0.104s
success onPostBootstrap - 0.108s
info bootstrap finished - 4.314s
success onPreExtractQueries - 0.002s
success extract queries from components - 0.362s
success write out requires - 0.004s
warn You can't use childImageSharp together with NavBar.en.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
warn You can't use childImageSharp together with Footer.ja.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
warn You can't use childImageSharp together with Footer.en.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
warn You can't use childImageSharp together with NavBar.ja.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
warn You can't use childImageSharp together with Top.en.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
warn You can't use childImageSharp together with Top.ja.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
warn You can't use childImageSharp together with 1-Services.en.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
warn You can't use childImageSharp together with 1-Services.ja.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
warn You can't use childImageSharp together with 2-Portfolio.en.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
warn You can't use childImageSharp together with 3-About.en.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
warn You can't use childImageSharp together with 2-Portfolio.ja.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
warn You can't use childImageSharp together with 3-About.ja.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
warn You can't use childImageSharp together with 4-Team.en.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
warn You can't use childImageSharp together with 4-Team.ja.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
warn You can't use childImageSharp together with 5-Clients.en.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
warn You can't use childImageSharp together with 6-Contact.ja.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
warn You can't use childImageSharp together with 6-Contact.en.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
warn You can't use childImageSharp together with 5-Clients.ja.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined
success run static queries - 0.230s - 2/2 8.68/s
success run page queries - 0.019s - 3/3 154.77/s

ERROR #98124 WEBPACK

Generating development SSR bundle failed

Can't resolve 'core-js/modules/web.dom.iterable.js' in '/Users/sonhongsu/horumont-portfolio/.cache'

If you're trying to use a package make sure that 'core-js/modules/web.dom.iterable.js' is installed. If you're trying to use a local file make sure that the path is correct.

File: .cache/loader.js

ERROR #98124 WEBPACK

Generating development SSR bundle failed

Can't resolve 'core-js/modules/web.dom.iterable.js' in '/Users/sonhongsu/horumont-portfolio/.cache'

If you're trying to use a package make sure that 'core-js/modules/web.dom.iterable.js' is installed. If you're trying to use a local file make sure that the path is correct.

File: .cache/prefetch.js

ERROR #98124 WEBPACK

Generating development SSR bundle failed

Can't resolve 'core-js/modules/web.dom.iterable.js' in '/Users/sonhongsu/horumont-portfolio/.cache'

If you're trying to use a package make sure that 'core-js/modules/web.dom.iterable.js' is installed. If you're trying to use a local file make sure that the path is correct.

File: .cache/find-path.js

ERROR #98124 WEBPACK

Generating development SSR bundle failed

Can't resolve 'core-js/modules/web.dom.iterable.js' in '/Users/sonhongsu/horumont-portfolio/node_modules/gatsby-omni-font-loader'

If you're trying to use a package make sure that 'core-js/modules/web.dom.iterable.js' is installed. If you're trying to use a local file make sure that the path is correct.

File: node_modules/gatsby-omni-font-loader/gatsby-ssr.js

ERROR #98124 WEBPACK

Generating development SSR bundle failed

Can't resolve 'core-js/modules/web.dom.iterable.js' in '/Users/sonhongsu/horumont-portfolio/node_modules/gatsby-omni-font-loader/utils'

If you're trying to use a package make sure that 'core-js/modules/web.dom.iterable.js' is installed. If you're trying to use a local file make sure that the path is correct.

File: node_modules/gatsby-omni-font-loader/utils/utils.ts

ERROR #98124 WEBPACK

Generating development SSR bundle failed

Can't resolve 'core-js/modules/web.dom.iterable.js' in '/Users/sonhongsu/horumont-portfolio/node_modules/gatsby-plugin-google-analytics'

If you're trying to use a package make sure that 'core-js/modules/web.dom.iterable.js' is installed. If you're trying to use a local file make sure that the path is correct.

File: node_modules/gatsby-plugin-google-analytics/gatsby-ssr.js

not finished Building development bundle - 2.576s

Answer 1

とりあえず解決したと思われます。

□１　スターターが比較的新しいので
node.jsのバージョンを最新の安定版にしました。

□２　Gatsbyの公式サイトに、
基本的にパッケージマネージャはyarnを使ってくださいみたいなことを書いていましたので
そこに書いている通りに
.config/gatsby/config.json　ファイルを編集しました。

	"cli": {
		"packageManager": "yarn"
	},
```　

その後、もう一度、gatsby neｗ -> gatsby develop をすると
localhostに表示できました。

npmとyarnでは、同じ指定をしていても
インストールされるパッケージバージョンが少し異なるということなんでしょうか。