ホーム > Gatsby > ReactのフレームワークGatsbyのGoogleAdsenseでCORSエラーが出た
Gatsby

ReactのフレームワークGatsbyのGoogleAdsenseでCORSエラーが出た

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. 解決方法
  2. まとめ
オススメ本

⇨ React 記事の目次はこちら

React のフレームワーク Gatsby の GoogleAdsense で CORS エラーが出たので解決方法を書いていきます。

細かいことはよく分かりませんが、もともと Adsense 自体は導入ができていて、記事内に無限に貼っていたんですが、

なぜかサイドバーに広告を貼ってみようとするとエラーが出ることに気がつきました。

なぜ・・・

エラーの内容

Error in function Object.invokeGuardedCallbackDev

A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://reactjs.org/link/crossorigin-error for more information.

No codeFrame could be generated

解決方法

どうやら GoogleAdsense は、最低でも２５０ px の width を用意しないとダメらしいです。

なんてこった。

普通にスタイルを与える

&__home-adsense {
  width: 250px;
  height: 50px;
  margin: 0 auto;
}

表示されました・・・！

オススメ本

まとめ

どうやらメインコンテンツに広告を貼るときは十分な Width があったりしたのですが、サイドバーは十分な width がなかったようで、エラーになっていたようです。

なかなかレアなパターンなのではないでしょうか？

ちなみに実験したら、display:none でも同じエラーがでました！

それでは！！！

質問、誤記などあれば Twitter などでご指摘よろしくおねがいします！

人気記事

PHP7.4 ＋ Laravel6 のプロジェクトを AWS EC2 にデプロイする

関連記事

【ReactNative+CloudVision】「怒り顔採点アプリ」を作った

フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。