![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/53c8ea5a-27df-40fe-bc42-1cef5b968ac3/171179514-46dafc98-b4c4-4143-b97c-8242b663763b.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T014642Z&X-Amz-Expires=3600&X-Amz-Signature=9bb855fcf10ec9b73a1cc2f10f81428367d7b3f6cbdf44796a72575499625463&X-Amz-SignedHeaders=host&x-id=GetObject)
easy-notion-blogのデフォルトのトップページは以下のようになっています。。。
※サイトタイトルだけはすでに変更しています。
サイトタイトルの変更方法は公式のREADMEに書いています。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/5cf65d68-fe49-412f-a36f-0e1f6b4aeaff/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T014642Z&X-Amz-Expires=3600&X-Amz-Signature=bba30686d587db1a6981e2e9b9404743a5fab8c46955394f28bcf575c94292e7&X-Amz-SignedHeaders=host&x-id=GetObject)
トップページを変更したところ、GitHubで以下のようにエラーが出ました。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/ddff4b07-0de2-4c06-95f8-f79ecd6e668d/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T014643Z&X-Amz-Expires=3600&X-Amz-Signature=8d54d97c209c776f2a44312a8e068affe907c69cbd959d5a1cb8a5dfddb4b752&X-Amz-SignedHeaders=host&x-id=GetObject)
今回はこのエラーの解決方法について書いています。
変更した内容
上記のエラーが出た時の変更内容は以下です。
トップページの内容を変えるためにhtmlを変えました。
src\pages\index.tsx
import DocumentHead from '../components/document-head'
import ExtLink from '../components/ext-link'
import styles from '../styles/page.module.css'
const RenderPage = () => (
<div className={styles.container}>
<DocumentHead />
<div>
<h2>Welcome!</h2>
<p>Your easy-notion-blog deployed successfully!</p>
<p>Have fun!</p>
<p>
easy-notion-blog powered by{' '}
<ExtLink href="https://github.com/otoyo/easy-notion-blog">
otoyo/easy-notion-blog
</ExtLink>
</p>
</div>
</div>
)
export default RenderPage
import DocumentHead from '../components/document-head'
import ExtLink from '../components/ext-link'
import styles from '../styles/page.module.css'
const RenderPage = () => (
<div className={styles.container}>
<DocumentHead />
<div>
<h2>About</h2>
<p>easy-notion-blogのこと、プログラミングのメモを書いていきます。</p>
<h2>Profile</h2>
<p>1989年生まれ、兵庫在住(徳島出身)のエンジニアです。</p>
<p>エンジニアと言っても、機械系のエンジニアでソフトウェアは素人です。</p>
<p>仕事ではデータ処理(自社製品開発の実験データ)にPython使ったり、自部門のポータルサイトの運営とかやってます。</p>
<p>上記の背景もあり、プログラミングに興味津々です。</p>
<p>詳しいプロフィールはTwitter<a href="https://twitter.com/ChabesuB" target="_blank">@ChabesuB</a>に貼ってます。</p>
<h2>Link</h2>
<p>文章をわかりやすく、正しく書くのは苦手ですが、書くのは好きみたいです。</p>
<ul>
<li><a href="https://zatsugaku-engineer.com/" target="_blank" rel="noopener noreferrer">雑学エンジニアブログ</a>・・・初めてのブログ from 2021/08</li>
<li><a href="https://note.com/chabesu_blog" target="_blank" rel="noopener noreferrer">note</a>・・・Notionのこと</li>
</ul>
</div>
</div>
)
export default RenderPage
1つ目のエラー:ESLint
1つ目のエラーはESLintのエラーでした。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/c6fe60bb-4752-40c9-8446-880543bc75eb/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T014642Z&X-Amz-Expires=3600&X-Amz-Signature=69cfa7448567fb0ee710a0dee4f8108b9de1e5b549da8fc7ed7c273c85c2a88d&X-Amz-SignedHeaders=host&x-id=GetObject)
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/8392260e-baf1-45ba-9ba1-729b46df82f4/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T014642Z&X-Amz-Expires=3600&X-Amz-Signature=a0a81236f61523d0745b38a7d7bdccbf5f0871b4cfcb36de960421e5724c1a81&X-Amz-SignedHeaders=host&x-id=GetObject)
ESLintについては以下を参考にしてください。
原因はリンクの書き方
エラーを見ると以下のような記載があります。
どうやらrel="noreferrer"
無しでtarget="_blank"
を使うのはセキュリティのリスクがあるということみたいです。
17:28 Error: Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations react/jsx-no-target-blank
しかし自分は以下のようにrel="noreferrer"
を入れていました。
<a href="https://zatsugaku-engineer.com/" target="_blank" rel="noopener noreferrer">
解決策:ExtLink
を使う
エラーの中に以下のようなエラーが含まれていました。
2:8 Error: 'ExtLink' is defined but never used.
エラーが出ている箇所を見てみると、ExtLink
がimport
されているけど使われていないということになっています。
import ExtLink from '../components/ext-link'
ExtLink
の定義位置に行ってみます。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/2d6137ce-d343-4bb3-8176-4543b967a215/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T014642Z&X-Amz-Expires=3600&X-Amz-Signature=c1838557ac3798080f2c926795c2a30ffddd0021ad5661a7f0e5ac4adda7e939&X-Amz-SignedHeaders=host&x-id=GetObject)
src\components\ext-link.tsx
に以下のようなコードがありました。
const ExtLink = props => (
<a {...props} rel="noopener" target={props.target || '_blank'} />
)
export default ExtLink
どうやらExtLink
という名前でリンクが定義されているようです。
トップページの変更前のコードをみると、リンクにはExtLink
が使われていました。
<ExtLink href="https://github.com/otoyo/easy-notion-blog">
otoyo/easy-notion-blog
</ExtLink>
リンクにExtLink
を使うことで1個目のエラーは解決。
この時点でブログには変更が反映されて表示できるようになります。
2つ目のエラー:Jest
ESLintのエラーを解決したことで、ブログには変更が反映されて表示できました。
しかしGitHubを見てみると、まだエラーが出ています。
2つ目のエラーはJestのエラーでした。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/de45ec3e-0f1e-4ca4-b4d2-2469abc44b4d/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T014642Z&X-Amz-Expires=3600&X-Amz-Signature=17d15c748e82e7fda37140e9888017a26cd2d47d7defa2fb4e3dca17aae1c3f5&X-Amz-SignedHeaders=host&x-id=GetObject)
Jestについては以下を参考にしてください。
解決策:.env.test
にNEXT_PUBLIC_URL
を追加
結論から言うと、以下のように.env.test
を追加して、その中にNEXT_PUBLIC_URL=”サイトのURL”
を追加して、yarn jest --updateSnapshot
を実行すると解決します。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/5dc51fe8-4593-47fc-bda3-78905d46f11d/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T014643Z&X-Amz-Expires=3600&X-Amz-Signature=5ab82d2b90a4bd9c948196fb2221aa877e7c4f6fd5ab695d42b5886ba18b26d1&X-Amz-SignedHeaders=host&x-id=GetObject)
.env.test
を追加して、その中にNEXT_PUBLIC_URL=”サイトのURL”
を追加するyarn jest --updateSnapshot
を実行してリモートリポジトリにプッシュする
yarn jest --updateSnapshot
git add .
git commit -m "change site title"
git push -u origin main
エラーの内容
エラーが全く解決できずに困ってツイートすると、またもやおとよさんとhoromiさんが助けてくれました。
以下のスレッドにエラーの内容や解決策が詰まっています。
原因
Gitのスナップショットとは、その時点での全てのコードを記録したものというイメージです(だと解釈しています。)
エラーが出た原因は、
- ローカルでは
NEXT_PUBLIC_URL
が設定されていないスナップショット - リモートでは
NEXT_PUBLIC_URL
が設定されているスナップショット - 上記に差分があって
Jest
のテストに落ちている。
ということのようです。
つまり、ローカルのNEXT_PUBLIC_URL
にリモートと同じ内容を設定してやればいいということです。
NEXT_PUBLIC_URL
にブログのトップページのURLを設定すればうまくいきました。NEXT_PUBLIC_URL
にブログURLを設定する
環境変数(NEXT_PUBLIC_URL
)を設定するにはいくつか方法があるようです。
.env.test
にNEXT_PUBLIC_URL
="ブログのURL"
を書いておく方法は上記で紹介しました。
別の方法として上記ツイッターの(1)export HOGE=”hote”
する方法を紹介します。
自分の場合はVS Codeのターミナルを使っているので、VS Codeのターミナル上で以下を実行すればエラーが無くなりました。
export NEXT_PUBLIC_URL="https://easy-notion-blog-zeta.vercel.app"
yarn jest --updateSnapshot
git add .
git commit -m "change site title"
git push -u origin main
ちなみにNEXT.jsの環境変数については、公式の以下のページがわかりやすいです。
終わりに
今回は、2日間程エラーが解決できず苦しみましたが、開発者のおとよさんのアドバイスのおかげでエラーを解決することができました。
ちなみに、自分よりもはるかに深く考察している記事がありますので、興味のある方は見てみてください!