Issue while trying to import socket.io in vue.js component in Laravel

Question

I am using Laravel 5.8 with inbuilt vue.js component and socket.io without using redis and laravel-echo-server

npm installation

npm install vue-socket.io

resources/js/app.js file in Laravel

import VueSocketio from 'vue-socket.io';
Vue.use(VueSocketio);

There is no error when compiled using npm run watch command. When I check the output in browser, there is following error.

Cannot call a class as a function

Issue comes in this line: Vue.use(VueSocketio);

Can you please suggest?

Below is Package.json file

"devDependencies": {
    "axios": "^0.18",
    "bootstrap": "^4.1.0",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^4.0.7",
    "lodash": "^4.17.5",
    "popper.js": "^1.12",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.15.2",
    "sass-loader": "^7.1.0",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.6.10",
    "vue-vpaginator": "^1.0.0"
},
"dependencies": {
    "bootstrap-vue": "^2.0.0-rc.24",
    "vee-validate": "^2.2.11",
    "vue-chat-scroll": "^1.3.5",
    "vue-recaptcha": "^1.2.0",
    "vue-socket.io": "^3.0.7",
    "vuejs-dialog": "^1.4.0"
}

Node.js side code. This is a complete different working directory from Laravel

const express = require("express");

class Server {

    constructor() {
        this.app = express();
        this.port = process.env.PORT || 89;
        this.host = process.env.HOST || `192.168.43.173:89`;
    }

    includeRoutes() {
    }

    appExecute() {

        var server = this.app.listen(this.port, () => {
            console.log(`Listening on http://${this.host}`);
        });        
    }
}

const server = new Server();
server.appExecute();

Update code as per suggested by Javas

Vue.use(new VueSocketio({
    debug: true,
    connection: 'http://192.168.43.173:89',
}));

Andrew Vasylchuk · Accepted Answer · 2019-08-26 08:47:24Z

4

+25

You should add a new keywoard before VueSocketio.

Vue.use(new VueSocketio({}));

Don't forget to specify a list of options.

answered Aug 26, 2019 at 8:47

Andrew Vasylchuk

4,7792 gold badges14 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pankaj Over a year ago

I got an error after changing the code. vue_socket_io__WEBPACK_IMPORTED_MODULE_3___default.a is not a constructor Also added the new code in my question at bottom.

Andrew Vasylchuk Over a year ago

@Pankaj, run npm i vue-socket.io, you should have 3.x of this package. If that does not help, try to remove node_modules and install it again.

Collectives™ on Stack Overflow

Issue while trying to import socket.io in vue.js component in Laravel

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related