Gatsby

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

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

⇨ 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 は、最低でも250 px の width を用意しないとダメらしいです。

なんてこった。

普通にスタイルを与える

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

表示されました・・・!

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

まとめ

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

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

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

それでは!!!

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

人気記事

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

関連記事

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