CODEWITHSUNDEEP
typescriptsocket.io
hungnm10
hungnm10

Reputation: 21

Cannot import 'socket.io-client' as module in typescript

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!

Upvotes: 1

Views: 8174

Answers (3)

Checker 8763
Checker 8763

Reputation: 34

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

Upvotes: 0

mPrinC
mPrinC

Reputation: 9411

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:

Upvotes: 2

Yakov Fain
Yakov Fain

Reputation: 12376

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.

Upvotes: 0

Related Questions