Can't import socket.io-client in angular project - node.js

Im trying to import socket.io-client into my project but the import line
import * as io from 'socket.io-client';
is throwing the following error
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,204): '>' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,239): '(' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,260): ',' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,265): ',' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,296): '(' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,313): ',' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,321): Expression expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (37,49): ';' expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (37,92): Expression expected.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (21,86): Cannot find name 'Parameters'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,212): 'EventNames' only refers to a type, but is being used as a value here.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,241): Cannot find name 'ReservedEvents'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,256): Cannot find name 'Ev'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,262): Cannot find name 'Ev'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,273): 'EventNames' only refers to a type, but is being used as a value here.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,298): Cannot find name 'UserEvents'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,309): Cannot find name 'Ev'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (30,315): Cannot find name 'never'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (37,58): Cannot find name 'never'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (37,94): Cannot find name 'T'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (51,31): Class 'StrictEventEmitter<ListenEvents, EmitEvents, ReservedEvents>' incorrectly extends base class 'Emitter<string>'.
Types of property 'on' are incompatible.
Type '<Ev extends ReservedOrUserEventNames<ReservedEvents, ListenEvents>>(ev: Ev, listener: [Ev]) => this' is not assignable to type '(event: string, listener: Function) => Emitter<string>'.
Types of parameters 'listener' and 'listener' are incompatible.
Type 'Function' is not assignable to type '[any]'.
Property '0' is missing in type 'Function'.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (72,53): A rest parameter must be of an array type.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/typed-events.d.ts (82,75): A rest parameter must be of an array type.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/socket.d.ts (48,9): An accessor cannot be declared in an ambient context.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/socket.d.ts (73,53): A rest parameter must be of an array type.
ERROR in C:/Users/USER/Desktop/VSCProjects/CellularAss8/client/node_modules/socket.io-client/build/socket.d.ts (184,9): An accessor cannot be declared in an ambient context.
After digging around for a bit I found that while being in angular debug mode, if I comment the import line out, save, uncomment and save the code run perfectly in debug mode.
Is there anyway to fix it so the import will work without the steps i mention above?
Angular version is 4.4.6
and socket.io-client version is 1.7.3
and here is the tsconfig.json file
{
"compileOnSave": false,
"compilerOptions": {
"esModuleInterop": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": ["node_modules/#types"],
"lib": ["es2017", "dom"]
},
"allowSyntheticDefaultImports": true
}

You are not using socket.io-client in version 1.7.3 but rather version ^4.1.3. That one defacto creates dependency on typescript 4 thanks to its packed type definition files but your project compiles with typescript ~2.3.3. Hence the error you are getting.
Make sure to install the correct version with npm i -S socket.io-client#1.7.3. It doesn't pack its own type definitions though (so it creates no dependency on typescript), so you will also need to install #types/socket.io-client#1 to get the types.

I'm not sure about the issue you mention but I might be able to provide a workaround.
You can try using this package instead https://www.npmjs.com/package/ngx-socket-io while working with Angular and Socket.io. I've used it in the past and it works well, it might solve your problem.
Simply install it and then configure it. Something like:
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: 'http://localhost:8988', options: {} };
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, SocketIoModule.forRoot(config)],
bootstrap: [AppComponent],
})
export class AppModule {}

Related

I am getting this error and don't know how to resolve it

index.ts:5:8 - error TS1192: Module '"D:/Calculator/node_modules/#types/chalk-animation/index"' has no default export.
5 import chalkAnimation from "chalk-animation";
~~~~~~
index.ts:22:1 - error TS1378: Top-level 'await' expressions are only allowed when the 'module' option is set to 'es2022', 'esnext', 'system', 'node16', or 'nodenext', and the 'target' option is set to 'es2017' or higher.
22 await welcome()
I am trying to use inquirer,chalk and chalk animation in node.js .Although my calculator is running on other computer but I don't understand why it is showing this error in my computer
In your tsconfig.json file, under "compilerOptions", add "esModuleInterop": true.
{
...
"compilerOptions": {
...
"esModuleInterop": true,
...
},
...
}
Without esModuleInterop, TypeScript defaults to resolving import names with a legacy mechanism, that is not compliant with the ESM spec, and is not compatible with the way Node.js handles imports of CJS modules in new code.

Using TS absolute paths in import statement triggers an error in react-native

I am currently converting relative paths to absolute paths in my React-Native app and it triggers the following error:
Error response to absolute import
And I have set up my tsconfig.json as follows:
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"#buttons/*": ["src/components/buttons/*"]
},
"jsx": "react",
"resolveJsonModule": true
}
}
The following statement is how it looks in the file that I am importing it in:
import {CoreButton} from '#buttons/CoreButton';
Any ideas or suggestions would be amazing :)
The solution to this problem has been found at the following link:
React native Typescript path alias unable to resolve module

Typescript compiling errors using 'vss-web-extension-sdk' & 'azure-pipelines-task-lib'

I am trying to follow the following guide to make a custom task in azure devops https://learn.microsoft.com/en-us/azure/devops/extend/develop/add-build-task?view=azure-devops
When I install both 'azure-pipelines-task-lib' & 'vss-web-extension-sdk'
and have a single typescript file that requires the task-lib, like the guide suggests, I get tons of typescript errors.
package.json
"dependencies": {
"azure-pipelines-task-lib": "^3.1.9",
"typescript": "^4.4.3",
"vss-web-extension-sdk": "^5.141.0"
}
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"target": "es6",
"rootDir": "src/",
"outDir": "dist/",
"types": [
"vss-web-extension-sdk"
]
},
"files": [
"src/index.ts"
]
}
index.ts
import tl = require('azure-pipelines-task-lib/task');
export function Foo() {
return "BAR"
}
File structure
Root
tsconfig.json
package.json
src
index.ts
dist
index.js
Errors
https://imgur.com/4aNJetK
node_modules/#types/node/module.d.ts:2:5 - error TS2300: Duplicate identifier 'mod'.
2 export = NodeJS.Module;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/#types/requirejs/index.d.ts:38:14
38 export = mod;
~~~
'mod' was also declared here.
node_modules/#types/requirejs/index.d.ts:38:14 - error TS2300: Duplicate identifier 'mod'.
38 export = mod;
~~~
node_modules/#types/node/module.d.ts:2:5
2 export = NodeJS.Module;
~~~~~~~~~~~~~~~~~~~~~~~
'mod' was also declared here.
node_modules/#types/requirejs/index.d.ts:422:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'require' must be of type
'NodeRequire', but here has type 'Require'.
422 declare var require: Require;
~~~~~~~
node_modules/#types/node/globals.d.ts:213:13
213 declare var require: NodeRequire;
~~~~~~~
'require' was also declared here.
node_modules/vss-web-extension-sdk/typings/vss.d.ts:3168:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'require' must be of type 'NodeRequire', but here has type 'Require'.
3168 declare var require: Require;
~~~~~~~
node_modules/#types/node/globals.d.ts:213:13
213 declare var require: NodeRequire;
~~~~~~~
'require' was also declared here.
Can someone provide me with ANY working example of compiling typescript when these libraries are installed?

Starting nestjs in production mode

I am using akveo backend bundle that I bought, and while everything seems to be working fine in development mode starting in production gives me following errors, I am new to nestjs itself.
Anyone know what's going here?
node_modules/#nestjs/core/adapters/http-adapter.d.ts:5:31 - error TS2420: Class 'AbstractHttpAdapter<TServer, TRequest, TResponse>' incorrectly implements interface 'HttpServer<TRequest, TResponse>'.
Property 'status' is missing in type 'AbstractHttpAdapter<TServer, TRequest, TResponse>' but required in type 'HttpServer<TRequest, TResponse>'.
5 export declare abstract class AbstractHttpAdapter<TServer = any, TRequest = any, TResponse = any> implements HttpServer<TRequest, TResponse> {
~~~~~~~~~~~~~~~~~~~
node_modules/#nestjs/common/interfaces/http/http-server.interface.d.ts:26:5
26 status(response: any, statusCode: number): any;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
'status' is declared here.
node_modules/#nestjs/core/application-config.d.ts:2:39 - error TS2307: Cannot find module '#nestjs/common/interfaces/configuration-provider.interface'.
2 import { ConfigurationProvider } from '#nestjs/common/interfaces/configuration-provider.interface';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/#nestjs/core/guards/guards-context-creator.d.ts:3:39 - error TS2307: Cannot find module '#nestjs/common/interfaces/configuration-provider.interface'.
3 import { ConfigurationProvider } from '#nestjs/common/interfaces/configuration-provider.interface';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/#nestjs/core/interceptors/interceptors-context-creator.d.ts:2:39 - error TS2307: Cannot find module '#nestjs/common/interfaces/configuration-provider.interface'.
2 import { ConfigurationProvider } from '#nestjs/common/interfaces/configuration-provider.interface';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/#nestjs/core/nest-application.d.ts:24:5 - error TS2416: Property 'getHttpAdapter' in type 'NestApplication' is not assignable to the same property in base type 'INestApplication'.
Type '() => AbstractHttpAdapter<any, any, any>' is not assignable to type '() => HttpServer<any, any>'.
Property 'status' is missing in type 'AbstractHttpAdapter<any, any, any>' but required in type 'HttpServer<any, any>'.
24 getHttpAdapter(): AbstractHttpAdapter;
~~~~~~~~~~~~~~
node_modules/#nestjs/common/interfaces/http/http-server.interface.d.ts:26:5
26 status(response: any, statusCode: number): any;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
'status' is declared here.
Found 5 errors.
I am using tsc -p tsconfig.build.json command to build it with tsconfig.build.json:
{
"extends": "./tsconfig.json",
"exclude": ["node_modules", "test", "**/*spec.ts"]
}
and tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"declaration": true,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es6",
"sourceMap": true,
"outDir": "./dist",
"baseUrl": "./"
},
"exclude": ["node_modules"]
}
I expect that this config should compile typescript code to javascript which then I would run with node dist/main.js command. Which it actually does. But I am worried about the typescript compiler errors.
Not sure without the code but got similar mismatches once upon a time in nest core packages. Check out package.json and ensure that all #nest packages have the same version, as sometimes they have 'breaking' changes even if it wasn't major release.
For an abstract example, something like that gave me errors related to core when building production:
"#nestjs/common": "6.6.0", // notice the core/common does not match, it should be bumped
"#nestjs/core": "6.6.2",

TS2451: Cannot redeclare block-scoped variable 'custom'

I'm using typescript in a web project. I use awesome-typescript-loader as a webpack loader. I am getting error when building my project:
ERROR in [at-loader] ./node_modules/#types/node/index.d.ts:82:15
TS2451: Cannot redeclare block-scoped variable 'custom'.
ERROR in [at-loader] ./node_modules/#types/node/index.d.ts:85:15
TS2451: Cannot redeclare block-scoped variable 'custom'.
ERROR in [at-loader] ./node_modules/#types/node/ts3.2/util.d.ts:7:15
TS2451: Cannot redeclare block-scoped variable 'custom'.
ERROR in [at-loader] ./node_modules/#types/node/ts3.2/util.d.ts:10:15
TS2451: Cannot redeclare block-scoped variable 'custom'.
I initiated a complete new folder with just typescript and #types/typescript installed, I can still see the same error complained by visual studio code.
Versions below:
"dependencies": {
"#types/node": "^11.13.6",
"typescript": "^3.4.4"
}
As the error showed above, I found
in index.d.ts:
declare module "util" {
namespace inspect {
const custom: symbol;
}
namespace promisify {
const custom: symbol;
}
namespace types {
function isBigInt64Array(value: any): boolean;
function isBigUint64Array(value: any): boolean;
}
}
in util.d.ts:
declare module "util" {
namespace inspect {
const custom: unique symbol;
}
namespace promisify {
const custom: unique symbol;
}
namespace types {
function isBigInt64Array(value: any): value is BigInt64Array;
function isBigUint64Array(value: any): value is BigUint64Array;
}
}
We can see custom is indeed being re-declared in index.d.ts and util.d.ts.
So my question is how to fix this issue? Is this a bug of #types/node?
I was facing the same issue. Removing reference to node in tsconfig fixed the issue for me.
Sample tsconfig.
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "dist",
"sourceMap": true
},
"files": [
// "./node_modules/#types/node/index.d.ts",
"./node_modules/#types/express/index.d.ts"
],
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
],
"lib": [
"es2017"
]
}
My problem is that I accidentally included node_modules/#types. Fixed by comment it out like this:
"include": ["src/**/*.ts","__tests__/**/*.ts"/*, "node_modules/#types"*/]
I had the same issue, but the error message was misleading just because of something wrong cached. I tried many things, but finally solved it by removing npm_modules, clearing cache, and new installation:
npm cache clean --force
npm install
I added this piece of code twice in protractor.conf.js file
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.e2e.json')
});

Resources