Import third party libraries in LWC through common component

Question

I am trying to import Rxjs library into my common utils component in LWC. I am not able to achieve that. Please help on this Rxjs,js

import {
    LightningElement
} from 'lwc';
import {
    loadScript
} from "lightning/platformResourceLoader";
import rxjs from "@salesforce/resourceUrl/rxjs";

export default class Rxjs extends LightningElement {
    myMessage;
    connectedCallback() {
        loadScript(this, rxjs + "/Rx.min.js").then(() => {

            })
            .catch(error => {
                console.log("error" + JSON.stringify(error));
            });
    }

}

messageService.js

import Rxjs from 'c/rxjs';

class messageService extends Rxjs {
    myMessage = new Subject();
    getMessage() {

         return this.myMessage.asObservable();
    }
    updateMessage(message) {        
        this.myMessage.next(message);
    }
}
export const {
    getMessage,
    updateMessage
} = new messageService()

And in my LWC component i am trying to use like this

import {
  getMessage,
updateMessage
} from 'c/messageService'

But I am getting default error pop up given by salesforce

Error in $A.getCallback() [Unknown error creating component: c:firstComponent]
createComponentErrorProcessor()@https://chaarvim-dev-ed.lightning.force.com/libraries/force/componentLibrary/errors.js:10:307 

Can you please help me what i am doing wrong

Answer 1

Works for me

lwc controller:

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import executeQuery from '@salesforce/apex/AccountsWithContact_cls.executeQuery'; // @AuraEnabled method

import reactivexUrl from '@salesforce/resourceUrl/ReactiveX'; // Static resource of https://unpkg.com/rxjs/bundles/rxjs.umd.min.js

export default class AccountsWithContacts extends LightningElement {

    renderedCallback() {
        Promise.all([
            loadScript(this, reactivexUrl)
        ]).then(() => {
            this.loadAccountsWithContacts();
            this.init
        }).catch(error => { })
    }

    /**
     * Returns an Observable that makes a call to a Salesforce method
     * @param {string} query soql query to execute in Salesforce
     */
    getData$( objParams = {} ) {
        return rxjs.defer( async () => {
            const response = await executeQuery(objParams);
            return response;
        }) ;
    }
    /**
     * Stream 1
     * List of Account
     */
    getAccountList$() {
        let query = 'SELECT Id, Name FROM Account ORDER BY CreatedDate DESC LIMIT 2';
        return this.getData$({ query });
    }

    loadAccountsWithContacts() {
        this.getAccountList$()
        .pipe(
            rxjs.operators.flatMap(( x ) => x)
        )
        .subscribe(( accounts ) => { // my subscription
            console.log('Accounts: ', { accounts });
        })
    }
}

Apex class:

public with sharing class AccountsWithContact_cls {

    public AccountsWithContact_cls() {
    }

    @AuraEnabled(cacheable = true)
    public static Object executeQuery( String query ) {
        return Database.query( query );
    }
}

Call Apex method: