search

eshaz / icecast-metadata-js

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

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

Closed LorenzoElenkov closed 8 months ago

LorenzoElenkov commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

super-continent commented 1 year ago

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 commented 1 year ago

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 commented 8 months ago

Closing due to inactivity.