1

I have added @types/socket.io-client module using npm

npm install --save @types/socket.io-client

After that import in my file datapulse.ts like that

import * as io from 'socket.io-client'
export class DataPulseProvider {
    private socket: any;
    public constructor(socketServer: string) {
       this.socket = io(socketServer);
    }
// do something
}

But when I build my project I got an error

[!] Error: Cannot call a namespace ('io')

Anyone have some experience with socket.io-client with typscript, please help me resolve above issue. Thank you!

Improve this question

3 Answers 3

Reset to default
2

Following the socket.io ES6 import you would do:

import io from 'socket.io-client';
const socket = io('http://localhost');

In short, you have to do it as the old way:

import * as io from 'socket.io-client';

is not compliant with ES6 and in the addition io is not callable anymore (it can be only object according to the ES^ namespacing specification):

// reports TS error
io(/* ... */);

So you have to extend tsconfig.json so TS will wrap for you the callable io into an object and make everything valid again:

{
    "compilerOptions": {
        "esModuleInterop_comment": "Necessary for incompatible modules to import, like socket.io",
        "esModuleInterop": true,
        // ...
    },
,
    "allowSyntheticDefaultImports_comment": "cannot be false, as needed for `esModuleInterop` parameter, though we can omit it",
    "allowSyntheticDefaultImports": true,
    // ...
}

This can also be helpful regarding namespacing:

And this regarding the esModuleInterop parameter:

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

Comments

0

I never worked with socket.io-client, but as per npmjs (https://www.npmjs.com/package/socket.io-client), you have to import io like this:

import io from 'socket.io-client';

It tells me that this library has one function with the export default keywords. But you use import * as io, which means that you want to import the entire module - an object that includes the default and named exported members, and you want to refer to this object as io.

Improve this answer

5 Comments

Thanks @Yakov Fain, but @types/socket.io-client does not has any functions with export default so I cannot import like you above.
Their d.ts file doesn't use ES6 modules github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/…. I may be old and doesn't match the actual implementation of the library. Try import io = require("io");
I've tried as your suggestion but it got an error Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.
Looks like a mismatch between the actual code and d.ts. Just declare the variable io of type any and use socket.io-client without IDE help.
I declared like that var io: any; io = require('socket.io-client'); but it got another error Uncaught ReferenceError: require is not defined
0

As the Socket.io Documentation says (nowadays) the types module isn't needed anymore. Uninstall it to get rid of the error.

Note for TypeScript users: the types are now included in the socket.io-client package and thus the types from @types/socket.io-client are not needed anymore and may in fact cause errors: ~ Docs

A correct import would look like this

// ES6 import or TypeScript
import { io } from "socket.io-client";
// CommonJS 
const io = require("socket.io-client");

~ Docs client-initialization

the @types/socket.io-client package was causing me troubles that's why I searcht for a solution and found another Stack Post where they had trouble with errors on the import

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.