ReferenceError: Worker is not defined

[DCRepublic]

After importing and initializing I am getting the following error. The stream still plays but I cannot get the project to build due to the error. Is there a dependency or import missing? (Running with NextJS)

 ⨯ node_modules/icecast-metadata-player/src/FrameQueue.js (16:24) @ eval
 ⨯ ReferenceError: Worker is not defined

[eshaz]

Could you check these existing issues regarding NextJS to see if you find a solution there.

To summarize: This library is meant to run on browsers only, and the problems are caused when NextJS attempts to execute this library in NodeJS (server side). NextJS needs to be configured to only run this library client side. This configuration and other work around are described in those existing issues.

Let me know if one of the existing suggestions works to fix this.

[DCRepublic]

The solution from #94 worked! My apologies for not seeing it sooner, I must have scrolled too far down initially. If anyone else comes looking here is my current implementation:

const [icecast, setIcecast] = useState();
const [audioElement, setAudioElement] = useState(null);

const station = {
    name: 'WSRN Radio',
    endpoint: `${url}/listen`,
    codec: 'AAC',
    metadataTypes: [''],
  };

useEffect(() => {
    setAudioElement(new Audio());
  }, []);

  useEffect(() => {
    if (!audioElement) return;
    const loadPlayer = async () => {
      const { default: IcecastMetadataPlayer } = await import('icecast-metadata-player');
      setIcecast(
        new IcecastMetadataPlayer(station.endpoint, {
          icyDetectionTimeout: 5000,
          enableLogging: true,
          metadataTypes: station.metadataTypes,
          audioElement,
          onMetadata: (metadata) => {
            console.log(metadata);
          },
        }),
      );
    };

    loadPlayer();
  }, [audioElement]);

[0x33dm]

const [icecast, setIcecast] = useState();

jesus it took me two re-incarnations to find this. thanks a lot @DCRepublic

@eshaz would it be possible for the library to check if it's running on "server side" and just fail silently or give a console.log and give an option to suppress such errors?

[eshaz]

@eshaz would it be possible for the library to check if it's running on "server side" and just fail silently or give a console.log and give an option to suppress such errors?

That might be possible. Perhaps while the top level code is executing, it can check if any of the required browser features are missing, and if so, throw an exception / console.error with a helpful message.

Ideally, Next.js needs to provide the ability to annotation or hint to their build toolchain to indicate that this code should only ever be run client side. As the maintainer, I would be very happy to put such a thing in to avoid these issues altogether.

[0x33dm]

@eshaz would it be possible for the library to check if it's running on "server side" and just fail silently or give a console.log and give an option to suppress such errors?

That might be possible. Perhaps while the top level code is executing, it can check if any of the required browser features are missing, and if so, throw an exception / console.error with a helpful message.

Ideally, Next.js needs to provide the ability to annotation or hint to their build toolchain to indicate that this code should only ever be run client side. As the maintainer, I would be very happy to put such a thing in to avoid these issues altogether.

On Next.js people used to check it like this:

if (typeof window !== "undefined") {
  // Client-side-only code
}

So in theory, if your the library depends on the browser that would be the way to check.

If it's undefined, then it's running on the server and could just fail silently or do a console.log.

I think the problem with throwing an error is that it could potentially break the build on vercel or other test routines.

I think the best would be to just console.log or simply silent ignore that situation.

One thing i don't understand is why do the library depend on a Worker?

I was expecting it to simply do HTTP requests / play audio