Error: constructor undefined when using with (3rd party library) object

I tried to use localStorage to store an object from another library and get this error:

TypeError: e2.constructor is undefined
    a index.mjs:1
    a index.mjs:1
    a index.mjs:1
    A index.mjs:1
    setValue index.mjs:1
    x index.mjs:1
    subscribe index.mjs:1
    x index.mjs:1
    X index.mjs:1
    H index.mjs:1
    <anonymous> store.js:19
app.js:16:41

Steps to reproduce:

npm create svelte@latest my_test (doesn't matter the configuration, tested with skeleton app, without types and with typescript, no linter etc)
install this library and another external one: npm install @macfja/svelte-persistent-store and npm install obs-websocket-js
create src/routes/store.js:

import { localWritable } from "@macfja/svelte-persistent-store"
import { writable } from "svelte/store"
import OBSWebSocket from 'obs-websocket-js';

export class BaseMyObj {}
class MyObj extends BaseMyObj {}

// export const obs = writable( new OBSWebSocket() ) // works
export const myobj = localWritable( "myobj" , new MyObj() ) // works
export const obs = localWritable( "obs" , new OBSWebSocket() ) // error

use store.js in +page.svelte: import { myobj } from "./store"

I am fairly new to webdev/js/svelte so it might be an error on my side.

What I have tried so far:

changed the sveltekit configuration (JS/TS) with the same error
tried to dig into the error itself, but there is no e2 or e2.constructor anywhere in the minified JS in the browser
tried to recreate the error with a custom class (that extends a base class) in JS/TS, these work just fine
also used the base functions (persist and all the available alias for localstorage) with the same error

I guess this error may be specific for the combination of those two libraries, however I lack the insight of both libraries to get into it deeper, especially with other 3rd party packages

Why do you need to persist a (Web)socket ?
A socket is a connection that will be opened and closed, and should not (IMO) be persisted in application data

What is the data you need to store/persist ?
From my vague understanding, what should be persisted is how to open a connection

OBSWebSocket is complex object that need some custom code to be persisted. (In particular, OBSWebSocket use EventEmitter which alter the standard object structure, needed to automagically save a class)

This lib can't handle this as-is. But the lib that @macfja/svelte-persistent-store rely on can!

// Somewhere in a init script
import { setSerialization } from "@macfja/svelte-persistent-store"
import { serialize, deserialize, addGlobalAllowedClass, addClassHandler } from "@macfja/serializer"
import { OBSWebSocket } from "obs-websocket-js";

addClassHandler(OBSWebSocket.constructor.name, (instance) => ({
    url: instance.socket.url,
    protocol: instance.protocol
    // any data that you need to save
}), (saved) => {
    const instance = new OBSWebSocket();
    instance.protocol = saved.protocol;
    instance.connect(saved.url);
    return instance;
})
setSerialization(serialize, deserialize, addGlobalAllowedClass)

// Now `@macfja/svelte-persistent-store` know how to save and load a `OBSWebSocket` in any futur call of `persist`

Warning
It's impossible to know any parameters used in OBSWebSocket.connect except for the url

Navigation Menu

Repository navigation

Error: constructor undefined when using with (3rd party library) object #53

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Error: constructor undefined when using with (3rd party library) object #53

Description

Activity

MacFJA commented on Jul 28, 2023

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions