質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Gatsby

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

5078閲覧

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

horumont

総合スコア9

Gatsby

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/01/10 02:50

編集2021/01/10 05:12

うまく行かなかったこと

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

表示されているエラー

1つ目

  • エラーメッセージ

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の部分がいろいろなファイルで18個くらい出てきます。

  • 調べてみたこと

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

2つ目

  • エラーメッセージ

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

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

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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

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

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

"cli": { "packageManager": "yarn" }, ```  その後、もう一度、gatsby new -> gatsby develop をすると localhostに表示できました。 npmとyarnでは、同じ指定をしていても インストールされるパッケージバージョンが少し異なるということなんでしょうか。

投稿2021/01/10 05:53

horumont

総合スコア9

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問