OpenNextでchakra UIが動かない時の修正法
9/13/2025
先日Nextjs+ChakraUIで作成したアプリケーションをCloudflareにデプロイしようと思ったのですがエラーが出まくってしょうがなかったので対処法を書いておきます。
やりたいこと
Nextjs+ChakraUIのWebアプリをCloudflareにデプロイ
エラーコマンドとエラー表示
$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を修正
再度ビルドしたら通りましたー