Error message: `Socket.io-client - Invalid TypeError: Expected a function for socket_io_client_1.default`

I have successfully installed socket.io-client in my Angular 5.2 application, but after trying to connect (which has worked flawlessly in the past), I am encountering a strange error.

TypeError: socket_io_client_1.default is not a function
    at new AuthService (auth.service.ts:15)
    at _createClass (core.js:10891)
    at _createProviderInstance$1 (core.js:10865)
    at resolveNgModuleDep (core.js:10850)
    at NgModuleRef_.get (core.js:12087)
    at resolveDep (core.js:12577)
    at createClass (core.js:12439)
    at createDirectiveInstance (core.js:12284)
    at createViewNodes (core.js:13742)
    at callViewAction (core.js:14176)

This error occurs on line 15 of the AuthService file.

import {Injectable} from '@angular/core';
import io from 'socket.io-client';
import {CookieService} from 'ngx-cookie-service';


@Injectable()
export class AuthService {
  socket;
  domain = 'http://localhost:3000';
  isUserLoggedIn = false;
  cookie_key = '';
  user = {};

  constructor(private cookieService: CookieService) {
    this.socket = io(this.domain);
  }

I am completely stumped by this issue. Any help or suggestions would be greatly appreciated.

javascriptangulartypescriptsocket.io

Answer №1

Employ:

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

Answer №2

Having encountered the identical issue, I suggest utilizing:

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

rather than:

import io from 'socket.io-client';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to visually represent options without labels using icons in Material UI Autocomplete

My options are structured as follows: const options = ['option1', 'option2']; I am looking to display the options with icons like this: https://i.stack.imgur.com/aubHS.png The current code for rendering options looks like this: ...

javascriptreactjsmaterial-uiautocomplete

Passing a variable by copy in a done call with Ajax

Here's the code snippet I'm working with: for (var i = 0; i < list.length; i++) { $.when( $.ajax({url: "./dorequest.php?id=" + list[i], success: function(response){ jsonFriendlist = response; }}) ).done( ...

javascriptajax

The concept of "Object Reference Pattern" in the world

Currently, I am working with a single object: var callback = { onValueChange: function () { }, onTabPressed: function () { }, onFocus: function () { } }; In my webpage, I have various editors such as textEditor and numericEditor, and I bind t ...

javascriptperformanceclosures

Utilize Javascript and JQuery to implement sending a custom header in an OPTIONS preflight API request

Snippet: $.ajax({ type: 'GET', dataType: 'json', url: api, xhrFields: { withCredentials: true }, beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', "Basic [my auth token]"); }, ...

javascriptjqueryajaxhttp-headers

Angular is unable to bind with 'dragula' because it does not recognize it as a valid property of 'ul'

I've been attempting to incorporate dragula into my Angular 2 application, but I'm struggling to get it functioning. This is what I have added in my app.module.ts file: import { DragulaModule, DragulaService } from 'ng2-dragula/ng2-dragula ...

javascriptangularnpmwebpackng2-dragula

Setting up ESM for Firebase functions: A step-by-step guide

Our server application needs to utilize the most recent ipfs-http-client as it is an authorized package for accessing IPFS. However, the project must switch to using ESM starting from v57.0.0. I have invested a significant amount of time into this and it h ...

typescriptfirebasegoogle-cloud-functionses6-modules

Issue with Backbone.Marionette: jQuery document.ready not executing when on a specific route

I am dealing with a situation in my web application where the document.ready() block is not being executed when the page routes from the login button to the dashboard. I have an initialize() function that contains this block, but it seems like there is an ...

javascriptjquerybackbone.jscoffeescriptmarionette

How can dependencies for an entire class or module be mocked in the mocha ecosystem similar to jest.mock?

I am currently working on unit testing a module that resembles the following code structure: import { Countdown } from "./database/orm"; export class PersistentTimer { protected constructor(...) { ... } // To ensure database writing ...

typescriptunit-testingmockingmocha.jssinon

How can I configure Vue 2 using Vue CLI to access and utilize images stored in the src/static directory?

I'm in the process of bundling my Vue CLI application to include src/static/xyz.png so that I can easily reference it as /static/xyz.png. Unfortunately, the documentation provided by Vue doesn't offer clear instructions on how to achieve this. I ...

javascriptvue.jswebpackvuejs2

The function socket.rooms returns an array with no elements

My server side code is as follows: io.on('connection', function (socket) { socket.join('main'); console.log(socket.rooms); /* ==> [] */ console.log(socket.adapter.rooms); /* ==> { '5incJ4hA4tKyJHUjAAAA&apo ...

expresssocket.io

The getStaticProps function will generate an object by fetching data from various URLs

Within my getStaticProps function in next js, I am faced with the challenge of fetching multiple dynamic URLs and exporting the results as props to the component. As these URLs are automatically generated, I do not know how many there will be to fetch. My ...

javascriptreactjsnext.js

What is the reason behind having 3 watchers for 1 binding in AngularJS?

Take a moment to view the screenshot provided below In the screenshot, it is evident that there are #3 watchers for a single binding. Would someone care to explain the reason behind this? P.S: I am utilizing AngularJS Batarang to assess performance. ...

javascriptangularjsangularjs-watchangularjs-bindings

Equalizing Lists in Angular 2

Struggling to locate documentation on this topic, but in Angular 1 it was possible to achieve the following: <textarea ng-model="name" ng-list=","></textarea> With this setup, if you were to input "Hello, world!" into the textarea, the name v ...

angularjsangular

Mocking multiple services and their constructors in an Angular 2 TypeScript Jasmine test component

I've got this login component code snippet that I need help testing in Angular. import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { FormBuilder, FormGroup, Validators } from '@ ...

angulartypescriptunit-testingkarma-jasmine

Guide on incorporating a customized HTML tag into ckeditor5

Can someone help me with integrating CKEditor and inserting HTML tag of a clicked image into the editor? I've tried different solutions but haven't been successful. I understand that doing this directly in CKEditor may not be secure. This is a V ...

javascriptvue.jsckeditor5

The uploading of a file in NodeJS is not possible as the connection was closed prematurely

When I created a website using nodejs, there was a specific page for uploading images to the server. It worked perfectly fine when tested on my computer. However, upon deploying it to the server, the upload functionality stopped working. Upon checking the ...

javascriptnode.jsnginx

Choosing options from an API response in a REACT-JS application

I have a Select Component in my application and I want it to automatically show the selected data once the response is received. import Select from "react-select"; <Select menuPlacement="auto" menuPosition="fixed" ...

javascriptreactjs

What causes the difference in inference for unspecified generics between a simple function call and a null-coalescing operator in TypeScript?

What causes the different types of a and b in the given code snippet? function empty<T>() { return [] as T[] } const defEmpty = empty() function test1(abc: number[]|null) { const a = abc ?? defEmpty const b = abc ?? empty() } Upon testing on t ...

typescripttypescript-types

Exploring ways to utilize array.find by comparing it to a different object

There are two arrays in JavaScript named designs and articles. var designs = [ { design_id:"bwbmbqlujurv", article_id:14782, name:"adidas demogorgon black" }, { design_id:"lg9yba2gkcwr", article_id:14782, name:"harry potter w ...

javascriptarraysvue.js

Tips for dynamically populating a mat-table dataSource

While working with backend data streaming, I encountered an issue where trying to push an event to dataSource resulted in an error stating that dataSource is not defined. Can anyone provide guidance on how to dynamically add data to a materialize table? s ...

javascriptangularangular-material2angular5