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

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

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

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

Node.js

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

React.js

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

解決済

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

horumont
horumont

総合スコア7

Gatsby

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

Node.js

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

React.js

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

1回答

0評価

0クリップ

2676閲覧

投稿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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Gatsby

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

Node.js

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

React.js

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