<p data-line="1" class="code-line">Cloudflare PagesでNext.jsプロジェクトをデプロイする際に、Node.JS Compatibility Errorに遭遇して解決したので備忘録。</p>
<p data-line="3" class="code-line"><img src="https://i.gyazo.com/a9ea480f474f37125b933ddf9a2617cf.png" alt="Image from Gyazo" /></p>
<h2 id="%E3%82%A8%E3%83%A9%E3%83%BC%E5%86%85%E5%AE%B9" data-line="5" class="code-line"><a class="header-anchor-link" href="#%E3%82%A8%E3%83%A9%E3%83%BC%E5%86%85%E5%AE%B9" aria-hidden="true"></a> エラー内容</h2>
<p data-line="7" class="code-line">デプロイ後、以下のようなエラーメッセージがページに表示されました。</p>
<aside class="msg alert"><span class="msg-symbol">!</span><div class="msg-content"><p data-line="10" class="code-line">Node.JS Compatibility Error<br />
no nodejs_compat compatibility flag set</p>
</div></aside>
<p data-line="14" class="code-line">このエラーは、Cloudflare PagesプロジェクトでNode.jsの組み込みモジュールにアクセスできないことを示しています。</p>
<h2 id="%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95" data-line="16" class="code-line"><a class="header-anchor-link" href="#%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95" aria-hidden="true"></a> 解決方法</h2>
<h3 id="cloudflare%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%81%8B%E3%82%89%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95" data-line="18" class="code-line"><a class="header-anchor-link" href="#cloudflare%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%81%8B%E3%82%89%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95" aria-hidden="true"></a> Cloudflareダッシュボードから設定する方法</h3>
<ol data-line="20" class="code-line">
<li data-line="20" class="code-line">Cloudflareダッシュボードにログインします。</li>
<li data-line="21" class="code-line">「Workers &amp; Pages」を選択し、該当するPagesプロジェクトを開きます。</li>
<li data-line="22" class="code-line">「設定」→「ランタイム」→「互換性フラグ」と進みます。</li>
<li data-line="23" class="code-line">「nodejs_compat」フラグを追加します。</li>
</ol>
<p data-line="25" class="code-line"><img src="https://i.gyazo.com/a98c53a56d48ebd8b03cf0214ff32054.png" alt="Image from Gyazo" /></p>
<p data-line="27" class="code-line"><strong>注意</strong>: フラグは <code>nodejs_compat</code> とだけ入力します。引用符やその他の文字は不要です。</p>
<h3 id="wrangler.toml%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A7%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95" data-line="29" class="code-line"><a class="header-anchor-link" href="#wrangler.toml%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A7%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95" aria-hidden="true"></a> wrangler.tomlファイルで設定する方法</h3>
<p data-line="31" class="code-line">プロジェクトのルートディレクトリにある <code>wrangler.toml</code> ファイルに以下の行を追加します：</p>
<div class="code-block-container"><pre class="language-toml"><code class="language-toml code-line" data-line="33"><span class="token key property">compatibility_flags</span> <span class="token punctuation">=</span> <span class="token punctuation">[</span> <span class="token string">"nodejs_compat"</span> <span class="token punctuation">]</span>
</code></pre></div><h3 id="%E6%B3%A8%E6%84%8F%E7%82%B9" data-line="37" class="code-line"><a class="header-anchor-link" href="#%E6%B3%A8%E6%84%8F%E7%82%B9" aria-hidden="true"></a> 注意点</h3>
<ul data-line="39" class="code-line">
<li data-line="39" class="code-line">Compatibility Flagsを設定した後は、変更を反映させるために<strong>再デプロイが必要</strong>です。</li>
<li data-line="40" class="code-line">設定方法によっては、ダッシュボードの「Functions」オプションが見つからない場合があります。その場合は <code>wrangler.toml</code> ファイルでの設定をお試しください。</li>
</ul>
<h2 id="%E5%8F%82%E8%80%83%E3%83%AA%E3%83%B3%E3%82%AF" data-line="42" class="code-line"><a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%83%AA%E3%83%B3%E3%82%AF" aria-hidden="true"></a> 参考リンク</h2>
<ul data-line="44" class="code-line">
<li data-line="44" class="code-line"><a href="https://developers.cloudflare.com/workers/configuration/compatibility-dates/#compatibility-flags" target="_blank" rel="nofollow noopener noreferrer">Cloudflare Developers - Compatibility Flags</a></li>
<li data-line="45" class="code-line"><a href="https://stackoverflow.com/questions/77199165/error-could-not-access-built-in-node-js-modules" target="_blank" rel="nofollow noopener noreferrer">Stack Overflow - Cloudflare Pages Node.JS Compatibility Error</a></li>
</ul>
<p data-line="47" class="code-line">このエラーに遭遇した際は、ぜひこの方法をお試しください。</p>


Cloudflare PagesでNode.JS Compatibility Errorが出たとき