<p>とあるアプリを作るためにNextjsで開発をしていたところ、いつものようにエラーが出ました</p><p>所で最近のNextjsでは右上にいかにもエディターで開くためのボタンがありますが、この機能を生かすには事前に設定が必要です。</p><h2 id="h8bb8734b16">設定方法</h2><p>プロジェクトルートにenvファイルを用意し、以下のコードを追加</p><div data-filename=".env"><pre><code>REACT_EDITOR=code</code></pre></div><p>これで開けるようになりましたー</p><p></p><p>【追記】</p><p>.envの変数名間違ってました...(2025/11/26修正)</p>

【一部修正】vsodeでNextjsのエラー部分のコードを開けるようにする

<p>先日Nextjs+ChakraUIで作成したアプリケーションをCloudflareにデプロイしようと思ったのですがエラーが出まくってしょうがなかったので対処法を書いておきます。</p><h2 id="h9f510f3156">やりたいこと</h2><p>Nextjs+ChakraUIのWebアプリをCloudflareにデプロイ</p><h2 id="h1619609f8c">エラーコマンドとエラー表示</h2><pre><code class="language-shell">$npx opennextjs-cloudflare build

...[中略]...

[ERROR] Could not resolve &quot;jose&quot;

    .open-next/server-functions/default/node_modules/next-auth/jwt/index.js:15:20:
      15 │ var _jose = require(&quot;jose&quot;);
         ╵                     ~~~~~~

  The module &quot;./dist/browser/index.js&quot; was not found on the file system:

    .open-next/server-functions/default/node_modules/jose/package.json:68:17:
      68 │       &quot;workerd&quot;: &quot;./dist/browser/index.js&quot;,
         ╵                  ~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path &quot;jose&quot; as external to exclude it from the bundle, which will remove this
  error and leave the unresolved path in the bundle. You can also surround this &quot;require&quot; call with
  a try/catch block to handle this failure at run-time instead of bundle-time.

✘ [ERROR] Could not resolve &quot;@panva/hkdf&quot;

    .open-next/server-functions/default/node_modules/next-auth/jwt/index.js:16:43:
      16 │ var _hkdf = _interopRequireDefault(require(&quot;@panva/hkdf&quot;));
         ╵                                            ~~~~~~~~~~~~~

  The module &quot;./dist/web/index.js&quot; was not found on the file system:

    .open-next/server-functions/default/node_modules/@panva/hkdf/package.json:33:17:
      33 │       &quot;workerd&quot;: &quot;./dist/web/index.js&quot;,
         ╵                  ~~~~~~~~~~~~~~~~~~~~~

  You can mark the path &quot;@panva/hkdf&quot; as external to exclude it from the bundle, which will remove
  this error and leave the unresolved path in the bundle. You can also surround this &quot;require&quot; call
  with a try/catch block to handle this failure at run-time instead of bundle-time.

✘ [ERROR] Could not resolve &quot;jose&quot;

    .open-next/server-functions/default/node_modules/openid-client/lib/helpers/client.js:1:21:
      1 │ const jose = require(&apos;jose&apos;);
        ╵                      ~~~~~~

  The module &quot;./dist/browser/index.js&quot; was not found on </code></pre><h2 id="h1c2bcaa1fd">原因と修正</h2><h3 id="h9c1f22bd6d">原因</h3><p>ChakraUIの依存関係である@emotionがビルド時に読み込まれていなかった...</p><p>next.config.jsを修正</p><div class="iframely-embed"><div class="iframely-responsive" style="padding-bottom: 50%;"><a href="https://gist.github.com/nk4dev/d46d42a549dac2c13c3333a063b14d05" data-iframely-url="https://cdn.iframe.ly/api/iframe?url=https%3A%2F%2Fgist.github.com%2Fnk4dev%2Fd46d42a549dac2c13c3333a063b14d05&amp;key=c271a3ec77ff4aa44d5948170dd74161"></a></div></div><script async src="https://cdn.iframe.ly/embed.js" charset="utf-8"></script><p>再度ビルドしたら通りましたー</p><h3 id="h6a5297362b">追記</h3><h3 id="h7295077a0f">エラーの原因(?)</h3><p>ビルド時のエラーについて、opennext側でビルドする際になぜかはわかりませんがライブラリをコピーしているっぽいのでこれが原因なのかなぁ...??</p><p>通常のnext buildとopennextのビルドは挙動がちがうので予測できない動きしちゃって難しい</p><pre><code>undling middleware function...
DEBUG OpenNext Resolve plugin for middleware
DEBUG OpenNext Edge plugin
DEBUG OpenNext Replacement plugin externalMiddlewareOverrides Delete override includeCacheInMiddleware
Bundling static assets...
Bundling cache assets...
Building server function: default...
DEBUG copyTracedFiles: 224308 ms
DEBUG Copying package using a workerd condition: node_modules/@emotion/cache -&gt; .open-next/server-functions/default/node_modules/@emotion/cache
DEBUG Copying package using a workerd condition: node_modules/@panva/hkdf -&gt; .open-next/server-functions/default/node_modules/@panva/hkdf
DEBUG Copying package using a workerd condition: node_modules/next-auth/node_modules/jose -&gt; .open-next/server-functions/default/node_modules/next-auth/node_modules/jose
DEBUG Copying package using a workerd condition: node_modules/openid-client/node_modules/jose -&gt; .open-next/server-functions/default/node_modules/openid-client/node_modules/jose</code></pre><h2 id="he4ba96ecb5">リンク</h2><p><a href="https://chakra-ui.com/">https://chakra-ui.com/</a></p><p><a href="https://opennext.js.org/">https://opennext.js.org/</a></p><p><a href="https://nextjs.org" target="_blank" rel="noopener noreferrer">https://nextjs.org</a></p><p></p><p></p>

【一部修正】vsodeでNextjsのエラー部分のコードを開けるようにする

OpenNextでchakra UIが動かない時の修正法