先日Nextjs+ChakraUIで作成したアプリケーションをCloudflareにデプロイしようと思ったのですがエラーが出まくってしょうがなかったので対処法を書いておきます。

やりたいこと

Nextjs+ChakraUIのWebアプリをCloudflareにデプロイ

エラーコマンドとエラー表示

code

$npx opennextjs-cloudflare build

...[中略]...

[ERROR] Could not resolve "jose"

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

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

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

  You can mark the path "jose" 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 "require" call with
  a try/catch block to handle this failure at run-time instead of bundle-time.

✘ [ERROR] Could not resolve "@panva/hkdf"

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

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

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

  You can mark the path "@panva/hkdf" 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 "require" call
  with a try/catch block to handle this failure at run-time instead of bundle-time.

✘ [ERROR] Could not resolve "jose"

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

  The module "./dist/browser/index.js" was not found on 

原因と修正

原因

ChakraUIの依存関係である@emotionがビルド時に読み込まれていなかった...

next.config.jsを修正

再度ビルドしたら通りましたー

追記

エラーの原因(?)

ビルド時のエラーについて、opennext側でビルドする際になぜかはわかりませんがライブラリをコピーしているっぽいのでこれが原因なのかなぁ...??

通常のnext buildとopennextのビルドは挙動がちがうので予測できない動きしちゃって難しい

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 -> .open-next/server-functions/default/node_modules/@emotion/cache
DEBUG Copying package using a workerd condition: node_modules/@panva/hkdf -> .open-next/server-functions/default/node_modules/@panva/hkdf
DEBUG Copying package using a workerd condition: node_modules/next-auth/node_modules/jose -> .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 -> .open-next/server-functions/default/node_modules/openid-client/node_modules/jose

リンク

https://chakra-ui.com/

https://opennext.js.org/

https://nextjs.org