compile failed when I use hook only

[zkhCreator]

Describe the bug when I use useAudioRecorder only, it shows failed to load ffmpeg core. but when I use hook and UI Components, it shows ok. how to solve it?

My Project based on NextJS 14.

here is my stack:

yarn run v1.22.21
$ next dev
   ▲ Next.js 14.0.4
   - Local:        http://localhost:3000

 ✓ Ready in 3.5s
 ○ Compiling /chat/[type] ...
 ⨯ ./node_modules/@ffmpeg/ffmpeg/src/browser/defaultOptions.js:7:0
Module not found: Can't resolve '/node_modules/@ffmpeg/core/dist/ffmpeg-core.js'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@ffmpeg/ffmpeg/src/browser/index.js
./node_modules/@ffmpeg/ffmpeg/src/index.js
./app/(page)/chat/hooks/useAudio.tsx
./app/(page)/chat/_component/audio-chat/audio-chat.tsx
 ⨯ ./node_modules/@ffmpeg/ffmpeg/src/browser/defaultOptions.js:7:0
Module not found: Can't resolve '/node_modules/@ffmpeg/core/dist/ffmpeg-core.js'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@ffmpeg/ffmpeg/src/browser/index.js
./node_modules/@ffmpeg/ffmpeg/src/index.js
./app/(page)/chat/hooks/useAudio.tsx
./app/(page)/chat/_component/audio-chat/audio-chat.tsx
 ⨯ ./node_modules/@ffmpeg/ffmpeg/src/browser/defaultOptions.js:7:0
Module not found: Can't resolve '/node_modules/@ffmpeg/core/dist/ffmpeg-core.js'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@ffmpeg/ffmpeg/src/browser/index.js
./node_modules/@ffmpeg/ffmpeg/src/index.js
./app/(page)/chat/hooks/useAudio.tsx
./app/(page)/chat/_component/audio-chat/audio-chat.tsx
 ⚠ Fast Refresh had to perform a full reload due to a runtime error.
 ✓ Compiled /favicon.ico in 161ms (485 modules)

To Reproduce Steps to reproduce the behavior:

Expected behavior run success.

Screenshots

Package info (please complete the following information):

• Version [e.g. 22]

Additional context Add any other context about the problem here.

[zkhCreator]

maybe the reason is that I use the hook in my hook. maybe my hook will compile in the server(because nextjs default render in server side). it cause the problem. but I dont know how to fix it. I explore all of the hook in my components.

[tsensei]

@zkhCreator Did you find any solution?

[zkhCreator]

@tsensei I just use the hooks in my client component directly, just use it in the use client tsx file. I think the client component not compile on the server side, so it will not show the problem.