How to Fix Unhandled Rejection (TypeError): chat.setUser is not a function in Firechat by Firebase in React.js

Question

I am trying to make a Chat application by using Firechat by Firebase

I am geting this error.

Unhandled Rejection (TypeError): chat.setUser is not a function

Below is the code

import React, { Component } from "react";
import { FirebaseContext } from "../../firebase";
import * as FirechatUI from 'firechat';

class PublicChat extends Component {
    static contextType = FirebaseContext;

    constructor(props) {
        super(props);

    };

    componentDidMount() {

        var elem = document.getElementById("firechat-wrapper");

        var chatRef = this.context.database.ref();

        var chat = new FirechatUI(chatRef, elem);

        this.context.auth.onAuthStateChanged(function(user) {
        if (user) {
            chat.setUser(user.uid, user.displayName);
            } 
        });
    }


    render() {
        return (
            <>
            <div id="firechat-wrapper"></div>
            </>
        );
    }
}

export default PublicChat;

..........................................................................................................................

Answer 1

import * as FirechatUI from 'firechat';

This import looks incorrect? Without the ../ means you're importing an npm library. It should probably be something like '../firechat' depending on your folder structure...

Answer 2

I found the solution, since I am using Global Firechat CDN library in index.html I needed to use in componentDidMount

// eslint-disable-next-line no-undef

And need to remove import * as FirechatUI from 'firechat';

componentDidMount() {

        var self = this;
        var elem = document.getElementById("firechat-wrapper");

        var chatRef = this.context.database.ref();
        // eslint-disable-next-line no-undef
        this.chat = new FirechatUI(chatRef, elem);

        console.log(this.chat);

        this.context.auth.onAuthStateChanged(function(user) {
        if (user) {
            self.chat.setUser(user.uid, user.displayName);
            } 
        });
    }