Getting error while calling IO in socket.io-client, angular 8

Question

I am calling IO of socket.io-client in my angular project like below:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/internal/Observable';
import * as io from 'socket.io-client';
@Injectable({
  providedIn: 'root'
})
export class SocketclientService {
  socket:any;
  url:any="ws://localhost:8080"
  constructor() {
    this.socket = io(this.url);
   }
   
   listen(eventname:any,data:any){
     return new Observable((subscriber)=>{
       this.socket.on(eventname,(data:any)=>{
         subscriber.next(data);
       })
     })
   }
   emit(eventname:string,data:any){
     this.socket.emit(eventname,data);
   } 
}

But I am always getting an error like:

 Error: src/app/services/socketclient.service.ts:11:19 - error TS2349: This expression is not callable.
      Type 'typeof import("C:/somepathtoproject/node_modules/socket.io-client/build/index")' has no call signatures.
    
    11     this.socket = io(this.url);
                         ~~

I am not getting it why this is showing, even I have installed @types/socket.io-client

score 30 · Accepted Answer · answered Dec 02 '20 at 16:42

30

In angular 10 works fine:

import {io} from 'socket.io-client';

This is the official documentation https://socket.io/docs/v3/client-api/index.html

answered Dec 02 '20 at 16:42

juanitourquiza

2,097
1
30
52

6

VSCode is giving me the following warning: `Module '"socket.io-client"' has no exported member 'io'.ts(2305)` but everything is working fine. – ViniciusArruda Dec 18 '20 at 17:51
2

This should be accepted answer. Works perfectly – Hemadri Dasari Jan 28 '21 at 20:01
And he also has to change the type of the socket to socket: Socket that is imported from the same dependency. – Frederiko Ribeiro Feb 09 '21 at 22:13
3

@ViniciusArruda and others: That is caused by manually installed type definitions. But they are included in the npm package now. So just remove them: `npm uninstall @types/socket.io-client`. – Martin Schneider Feb 15 '21 at 13:57

score 10 · Answer 2 · answered Feb 15 '21 at 14:07

That may be caused by the type definitions been installed separately. But they are shipped with the socket.io-client package now (see docs: "Note for TypeScript users").

So just uninstall them and change the imports:

npm uninstall @types/socket.io-client

import { io, Socket } from 'socket.io-client';

score 6 · Answer 3 · answered Nov 23 '20 at 09:03

I found a workaround for this, I explored the socket.io-client modules a bit and under 'index.d.ts' I found this line:

export { lookup as io, Socket, SocketOptions };

So I tried importing like this:

import {io} from 'socket.io-client/build/index';

then to use it:

this.socket=io(url);

it worked for me.

score 4 · Answer 4 · answered Feb 09 '21 at 22:15

Here's a 2021 updated way of doing this with Typescript:


import { io, Socket } from 'socket.io-client';

export default class SocketService {
  socket: Socket;

  constructor(conn) {
    this.socket = io(conn);
 
   (...)
  }
}

One should import the io inside the brackets and also attribute the socket with the Socket type also comming from 'socket.io-client'.

score 2 · Answer 5 · answered Nov 13 '20 at 03:35

Your import statement is incorrect, it should look like this

import io from 'socket.io-client';

If you look into type definition you can see that it is declared as

declare module 'socket.io-client' {
 export = io;
}

which according to this means that it

The export = syntax specifies a single object that is exported from the module

which if I understand correctly is similar to default export that require above import syntax

score 2 · Answer 6 · edited Nov 18 '20 at 05:38

2

even I am also facing the same issues from last 2 days, Here is how I tackled this issue:

-> import * as io from 'socket.io-client'; //gives error in newer version, not sure why.

so use-> import {io} from 'socket.io-client'; //it will not throw any error

1)Firstly the error is because of newer version of socket.io-client(i,e version>3.0- which got released few days back). So try using the most stable.(I used 2.3.0 both in client & in server side) 2)Make sure that the socket version which you are using in client side matches with the socket version used in server.

edited Nov 18 '20 at 05:38

Dharman

30,962
25
85
135

answered Nov 18 '20 at 05:33

Shivashankar

33
1
3

I am using const io= require('socket.io-client) – Daksh Dutta Nov 18 '20 at 06:49
import {io} ... is cousing this issue "Module '"socket.io-client"' has no exported member 'io'.ts(2305)" – Michael Burger Nov 20 '20 at 11:57
1

ok, this problem is only on typescript if you have installed @types/socket.io-client – Michael Burger Nov 20 '20 at 12:02

Abhishek Gautam · Answer 7 · 2021-02-22T06:03:46.630

2

Actually, your code is correct but I believe you are using the updated version of the socketIO which is (3.0) client.

Use the below version : paste the entry in the package.json and run npm i.

**"socket.io-client": "2.2.0"**,

or simply remove the earlier version and install the 2.0 version.

$npm i socket.io-client@2.2.0 --save

edited Feb 22 '21 at 06:03

answered Feb 19 '21 at 06:56

Abhishek Gautam

1,617
3
18
29

Detroit Charan · Answer 8 · 2020-11-27T09:47:23.350

1

Install the following versions for the above example

$npm i socket.io-client@2.2.0 --save

edited Nov 27 '20 at 09:47

answered Nov 27 '20 at 09:31

Detroit Charan

161
1
2

score 0 · Answer 9 · answered Oct 30 '21 at 20:21

changing import statement to

import {io} from 'socket.io-client';

works fine for "socket.io-client": "^4.3.2" and above

while starting connection, use this statement:

    this.socket = io(< server url >, {query: { <your data object> });

in previous version, query key used to accept string and objects, now it shows type error for string

Getting error while calling IO in socket.io-client, angular 8

9 Answers9

Linked