search

eshaz / icecast-metadata-js

Browser and NodeJS packages for playing and reading Icecast compatible streaming audio with realtime metadata updates.
148 stars 20 forks source link

Repeated warnings when running in a Next.js app #200

Open claquesous opened 1 month ago

claquesous commented 1 month ago

I'm getting constant warnings when using IcecastMetadataPlayer in a Next.js app.

I'm including it in a component called player.tsx this way: import IcecastMetadataPlayer from 'icecast-metadata-player'

When I tried a production build, I get this output during the build step which match the warnings when running in dev mode.

   Creating an optimized production build ...
 ⚠ Compiled with warnings

./node_modules/@eshaz/web-worker/cjs/node.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/@eshaz/web-worker/cjs/node.js
./node_modules/@wasm-audio-decoders/common/src/WASMAudioDecoderWorker.js
./node_modules/@wasm-audio-decoders/common/index.js
./node_modules/@wasm-audio-decoders/flac/index.js
./node_modules/icecast-metadata-player/src/players/WebAudioPlayer.js
./node_modules/icecast-metadata-player/src/PlayerFactory.js
./node_modules/icecast-metadata-player/src/IcecastMetadataPlayer.js
./app/_components/player.tsx

./node_modules/synaudio/node_modules/@eshaz/web-worker/cjs/node.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/synaudio/node_modules/@eshaz/web-worker/cjs/node.js
./node_modules/synaudio/src/SynAudio.js
./node_modules/synaudio/index.js
./node_modules/icecast-metadata-player/src/FrameQueue.js
./node_modules/icecast-metadata-player/src/players/Player.js
./node_modules/icecast-metadata-player/src/PlayerFactory.js
./node_modules/icecast-metadata-player/src/IcecastMetadataPlayer.js
./app/_components/player.tsx

 ✓ Compiled successfully

Originally, the Generating static pages step failed too, but I used this workaround to get the overall build to succeed: https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr

I don't really know much about Web Assembly, but I'm guessing the dynamic workaround could be because it just won't work server side. So be it. I'm wondering if the warning is legitimate though.

Thanks for your consideration.

eshaz commented 1 month ago

Based on the errors, it looks like the problem is in the eshaz/webworker library where Next.js is attempting to use the Node Web Worker polyfill.

The Web Worker code is used by the wasm-audio-decoders library for iOS compatibility, so if there is a problem there, iOS playback may not work as expected.

Could you try replacing your existing import IcecastMetadataPlayer from 'icecast-metadata-player' with what @DCRepublic did here https://github.com/eshaz/icecast-metadata-js/issues/197#issuecomment-1974924934. This should force the import and everything downstream that it uses to be evaluated client side. If it works, I think the warning should also go away.

claquesous commented 1 month ago

So I can report back that the fix basically has the same effect as the dynamic option. Both allow me to do a production build, but neither are killing the stream of warnings. Unfortunately, this option is causing me TypeScript troubles, so I'll probably stick with the dynamic option which also feels a little more readable.

On a side note, I don't understand why 'use client' isn't the fix. It seems the most straightforward and even idiomatic for this scenario.

Apologies I didn't check closed issues for this. It's clearly happened a few times. I'd be happy to submit a PR to put a pointer in the README.