'IcecastReadableStream' is not exported from 'icecast-metadata-js' (imported as 'IcecastReadableStream')

[LorenzoElenkov]

I am trying to import IcecastMetadataPlayer in a Nextjs project but it whines with:

- error ./node_modules/icecast-metadata-player/src/PlayerFactory.js
Attempted import error: 'IcecastReadableStream' is not exported from 'icecast-metadata-js' (imported as 'IcecastReadableStream').

Import trace for requested module:
./node_modules/icecast-metadata-player/src/PlayerFactory.js
./node_modules/icecast-metadata-player/src/IcecastMetadataPlayer.js
./src/app/page.js
- warn Fast Refresh had to perform a full reload due to a runtime error.
- wait compiling /favicon.ico/route (client and server)...
- error ./node_modules/icecast-metadata-player/src/PlayerFactory.js
Attempted import error: 'IcecastReadableStream' is not exported from 'icecast-metadata-js' (imported as 'IcecastReadableStream').

Import trace for requested module:
./node_modules/icecast-metadata-player/src/PlayerFactory.js
./node_modules/icecast-metadata-player/src/IcecastMetadataPlayer.js
./src/app/page.js

[LorenzoElenkov]

I changed the import declaration in node_modules/icecast-metadata-player/src/PlayerFactory.js
from

import {
  IcecastMetadataQueue,
  IcecastReadableStream,
} from "icecast-metadata-js";

to

import {
  IcecastMetadataQueue,
  IcecastReadableStream,
} from "icecast-metadata-js/browser";

Adding the /browser to the url.

Also adding "use client" to the top of the nextjs component which renders the IcecastMetadataPlayer

[LorenzoElenkov]

I cannot build the Nextjs project with next export because I have this error

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: Worker is not defined
    at Object.431 (/Users/elenkovlorenzo/Desktop/radiozara-next/.next/server/chunks/245.js:14444:25)
    at __webpack_require__ (/Users/elenkovlorenzo/Desktop/radiozara-next/.next/server/webpack-runtime.js:25:42)
    at Object.6317 (/Users/elenkovlorenzo/Desktop/radiozara-next/.next/server/app/page.js:318:81)
    at __webpack_require__ (/Users/elenkovlorenzo/Desktop/radiozara-next/.next/server/webpack-runtime.js:25:42)
    at O (/Users/elenkovlorenzo/Desktop/radiozara-next/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js:23:142)
    at ia (/Users/elenkovlorenzo/Desktop/radiozara-next/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js:27:301)
    at Object.<anonymous> (/Users/elenkovlorenzo/Desktop/radiozara-next/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js:29:63)
    at JSON.parse (<anonymous>)
    at N (/Users/elenkovlorenzo/Desktop/radiozara-next/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js:22:53)
    at c (/Users/elenkovlorenzo/Desktop/radiozara-next/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js:33:166)
(node:83761) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:83764) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:83764) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
- info Generating static pages (4/4)

> Export encountered errors on following paths:
        /page: /

I removed the import declaration of the metadata player and tried to build the project, it succeeded.

How could I use this package in a client-side component in Nextjs13?

At the end, I export the nextjs project as static files to serve them over FTP.

[eshaz]

I can't help with how to build NextJS projects, but you will need to have icecast-metadata-player execute client side only. Can you take a look here and here to try some of the solutions described.

[super-continent]

getting this error using Svelte with Vite as a preprocessor (standard sveltekit setup). unsure how to fix it, assuming forcing the browser version might work? I don't know how to do that though.

Error when evaluating SSR module /src/lib/StreamPlayer.svelte: failed to import "icecast-metadata-player"
SyntaxError: The requested module 'icecast-metadata-js' does not provide an export named 'IcecastReadableStream'

[eshaz]

Checking in on this issue. Have you had a chance to try the suggestions I posted above?

[super-continent]

I attempted to translate those solutions into my own svelte project but unfortunately svelte doesn't really seem to work with anything like await import so i couldn't dynamically load it. unsure what else to try

[eshaz]

I'm not familiar at all with Svelte, but usually frameworks will have support to polyfill features, or they have ways to enable language features through configuration.

Searching for this yielded this result that may help https://stackoverflow.com/a/71350674

As a last resort, maybe you can add IcecastMetadataPlayer in a separate script tag in some static HTML outside of your Svelte setup.

[eshaz]

Closing due to inactivity.