Using client-side code in onMount?

[kjurel]

const stream = atom<MediaStream | null>(null);
const closeStream = action(stream, "close", (s) =>
  s
    .get()
    ?.getTracks()
    .forEach((v) => s.get()?.removeTrack(v))
);

onMount(stream, () => {
  const newStream = new MediaStream();
  stream.set(newStream);
  return closeStream;
});

We cannot currently do this using Nanostore as MediaStream inside onMount gives RefereceError. Is there some other/better way of solving this - setting the initial value of store to null, and then setting an initializer when is mounted.
Using- Astrojs, Solid

[ai]

Looks like this error is not from Nano Stores.

Maybe you don’t have MediaStream polyfill in Node.js when you run tests?

Can you show more details of this issue? Error stack trace. What did you do to get it?

[kjurel]

Yes, this error is not from Nanostores

When starting out with Nanostores, I presumed the onMount worked like the onMount in solidjs, i.e. we could write Client side code ( for example, initializing something that is only available in client scope, like MediaStream)

To replicate, I am importing stream in a tsx component and registering a useStore ( solidjs ) and using it in createEffect.

Am I over complicating things, is there a better way to set the value of a nanostore (atom), such as setting an initializer callback that is run only once and is used to set a default value of a store WHICH SUPPORTS PASSING CLIENT SIDE STUFF ( example, setting the stream store to new MediaStream() when store is first initialized)

[ai]

I presumed the onMount worked like the onMount in solidjs

No. in Nano Stores onMount events calls on the first listener.

[kjurel]

yes, I understand that- but can we use onMout as intialiser for the store - using Client side stuff (MediaStream, PeerConnection... etc...)

[ai]

But am I right that the same store initializers will be called on the server, when you don’t have MediaStream?

So you need some if to detect server and do another initializing there.

[kjurel]

Thank you very much, if this is what you were suggesting import { isServer } from "solid-js/web". I did read about it in the docs but thought there wasn't a use-case for this, but now i understand better.