instantiating an es6 class

Question

I am trying to use es6 to make a chatroom connection class. I am using rabbitmq/STOMP to push the exchange data to subscribers. The code I am using had worked in es5 style, but I was hardcoding the exchange name. I am using webpack/babel to transpile this code back to es5 in a file called chat.bundle.js but when I run:

var chatRoom = new ChatRoom('thisExchange');

The console logs: Uncaught ReferenceError: ChatRoom is not defined

I am instantiating the class ChatRoom after the bundle file is loaded (below this script tag for the bundle).

I know probably the load() function will not work... I am new to es6 classes and not sure how to get window.load to work but this is a separate issue. For now I just want to be able to instantiate this class by providing the argument of the exchangeName and then move on to new errors after this.

Here is my terribly written es6 class:

// Use SockJS
Stomp.WebSocketClass = SockJS;
// Connection parameters
var mq_username = "guest",
mq_password = "guest",
mq_vhost    = "/",
mq_url      = 'http://localhost:15674/stomp',
mq_queue    = "/exchange/${this.exchange}";
var output;
var client = Stomp.client(mq_url);

class ChatRoom {
    constructor(exchange){
        this._exchange=exchange;
    }
    get exchange(){
        return this._exchange;
    }

    toString() {
        return `${this.exchange}`
    }

    on_connect() {
    output.innerHTML += 'Connected to RabbitMQ-Web-Stomp<br />';
    console.log(client);
    client.subscribe(mq_queue, on_message);
}

// This will be called upon a connection error
    on_connect_error() {
        output.innerHTML += 'Connection failed!<br />';
    }

// This will be called upon arrival of a message
on_message(m) {
    console.log('message received');
    console.log(m);
    output.innerHTML += m.body + '<br />';
}

load(){
    return new Promise(function(resolve,reject){
        window.onload =  () => {
            // Fetch output panel
            output = document.getElementById("output");

            // Connect
            client.connect(
                self.mq_username,
                self.mq_password,
                self.on_connect,
                self.on_connect_error,
                self.mq_vhost
            );
        }
    });
}


}

In my html file, the script tags are structured as follow:

<script src="static/chat.bundle.js"></script>
<script>var chatRoom=new ChatRoom('soccer@newark');</script>

Webpack builds successfully and does not complain about the syntax of the es6 file for the chat bundle as shown above.

It may be that your class is never defined. Are you in "use strict" mode? If not this may have the same answer as the following post: http://stackoverflow.com/questions/34231445/es6-classes-dont-work-on-chrome-47 — D--, Feb 12 '16 at 18:31
Some hints: Is the chat.bundle.js file correctly created (without any errors) ? When do you do `var chatRoom = new ChatRoom('thisExchange');` ? Check where & when you access `output` — topheman, Feb 12 '16 at 22:45
I added a couple more lines frmo the HTML file where the script tags are included. there dont seem to be any errors in the bundle file — kinghenry14, Feb 13 '16 at 01:20

score 1 · Accepted Answer · edited May 23 '17 at 12:15

Usually, module bundlers such as webpack don't expose module locals. If you want to export your class ChatRoom as public API, add module.exports expression at the end of your file

module.exports = ChatRoom;

NB You may want to use export default ChatRoom instead of module.exports. But be aware that Babel since 6.0 version exports default under the default key rather than entire export. See this question and answers for more information.

But this is not enough. You also need setup Webpack to create a library from your code. Add the following into your webpack.config.js

output: {
    library: 'ChatRoom',
    libraryTarget: 'umd'
},

See webpack docs for more details

instantiating an es6 class

1 Answers1