V3.0 and Socket.io-client NPM module

Hello

I’m trying to study Cocos Creator 3.0 and Socket.io but I’m having a hard time to make it work.

My test project is here:
Biodam/CocosCreatorWithSocket.io: Study project to learn and try if Socket.io works with CocosCreator 3.0 (github.com)

I’m trying to make a server with Node+Express+SocketIO, and configure the client with CocosCreator3.0.

I installed socket.io-client npm module in the CC project but this kind of erros keep showing up:
image
But the files are there on the folders:
image

It seems to be a dependency problem?

I read this thread:
Cocos Creator v3.0 and NPM Modules - Cocos Creator - Cocos Forums (cocos2d-x.org)

But it didn’t help much as the import syntax seems to be fine.

I identified that the socket.io-client package is "type": "commonjs", but I’m not sure what else should I do to make it work besides changing the way to import it on my Cocos Typescript component.

Thank you in advance for your attention.

1 Like

I’m getting similar issue with lodash/fp module:

image

I may wrong but it seems that SystemJS is not resolving correctly modules paths of the project.

1 Like

Hi @tobiasbu Did you try

import fp from 'lodash/fp.js';

Hi @Biodam :

import "socket.io-client" imports the main module of package socket.io-client which is dedicated to Node.js – requires some Node.js builtin packages to work.

To use it in Creator, you should use the WEB version:

import io from 'socket.io-client/dist/socket.io.js';

To eliminate the type error, new a some-name.d.ts in project:

// Declare the shape of "socket.io-client/dist/socket.io.js"
declare "socket.io-client/dist/socket.io.js" {
    import io from "socket.io-client";
    export default io;
}
1 Like

Hey there, thank you

With this simple change to point directly like

import io from 'socket.io-client/dist/socket.io.js';

Did solve the problem, after some extra configuration needed by SocketIO about CORS I was able to connect and receive the socket.id successfully.
image

Now I’ll study SocketIO to see how to implement things.

But to eliminate the type error I needed to change my some-name.d.ts a little from what you suggested to:

// Declare the shape of "socket.io-client/dist/socket.io.js"
declare module "socket.io-client/dist/socket.io.js" {
    import { io } from "socket.io-client";
    export default io;
}

I’m not sure if these little changes to add module and { io } makes any problems, but now VSCode doesn’t warn me about anything and the project and connection seems to be working fine.

Thank you so much

I’m not sure if these little changes to add module and { io } makes any problems

You’re right. socket.io-client exports io as named export instead of default export. By looking at node_modules\socket.io-client\build\index.d.ts, I think it’d better to re-export all named exports from "socket.io-client/dist/socket.io.js":

declare module "socket.io-client/dist/socket.io.js" {
    export * from "socket.io-client";
}
1 Like

Alright, thank you so much @shrinktofit

Just to summarize here for anyone that needs future reference:

Install socket.io-client with npm like:

npm install socket.io-client

Import as:

import { io } from 'socket.io-client/dist/socket.io.js';

Create another script script-name.d.ts with:

declare module "socket.io-client/dist/socket.io.js" {
    export * from "socket.io-client";
}

This script will tell VSCode how to handle the import and help with its auto-completion.

Note: This was tested with Cocos Creator 3.0 and socket.io-client 3.1.2

Thanks again, I hope this thread can be useful in the future as well.

6 Likes

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.