0

Error completo:

Uncaught TypeError: El especificador “socket.io-client” era un especificador básico, pero no se reasignó a nada. Los especificadores de módulos relativos deben comenzar con “./”, “../” o “/”.

Por razones muy circunstanciales, estoy tratando de importar y usar solo la versión de Socket.IO por el lado del cliente ya que mi servidor forzosamente tengo que usarlo como WebSocket por parte de python. El dilema que estoy teniendo es que no estoy logrando importar socket.io-client para ser usado mediante el navegador, simplemente me arroja ese error el cual parece ser un error de importación sin forma de arreglar.

Datos importantes:

  • Estoy usando módulos de ES6
  • Estoy usando Typescript
  • Estoy usando la libreria express y socket.io-client (derivado de socket.io)
  • NO estoy usando ningun bundler, simplemente tsc
  • Ya probé diferentes tipos de importaciones sin ningún resultado.
  • socket.io-client especifica que ya tiene sus tipos integrados y que instalarlos por aparte se considera deprecated, dato importante por parte de NPM.
  • Ya probe una configuración especifica de ts-config para ayudar con la compatibilidad entre modulos pero no ha funcionado:

ts-config.json:

{
  "include": [
    "main.ts",
    "public/**/*"
  ],
  "compilerOptions": {
    "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "module": "Node16", /* Specify what module code is generated. */
    "outDir": "./dist", /* Specify an output folder for all emitted files. */
    "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
    "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
    /* Type Checking */
    "strict": true, /* Enable all strict type-checking options. */
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  }
}

Este es el código que estoy usando:

main.ts:

import express from "express";
import path from "path";

import { fileURLToPath } from 'url';
import { dirname } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const PORT = 4180;
const app = express();

app.use(express.static(path.join(__dirname, "public")));

app.listen(PORT, () => {
  console.log(`Running on: http://localhost:${PORT}`);
})

public/index.html:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type = "module" src="main.js"></script>
    <title>Web Socket CLI</title>
  </head>

  <body>

  </body>
</html>

public/main.ts:

import io from "socket.io-client";  //FALLA
//import * as io from "socket.io-client" //FALLA IGUAL

console.log(io);
console.log('OK');

package.json:

{
  "name": "ws_client_socket_ts",
  "type": "module",
  "version": "1.0.0",
  "main": "./dist/main.js",
  "scripts": {
    "build": "tsc && npm run copyothers",
    "rebuild": "rm -R ./dist && npm run build",
    "start": "tsc -w & nodemon ./dist/main.js",
    "copyothers": "copyfiles ./public/index.html ./dist/"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@types/express": "^5.0.0",
    "dotenv": "^16.4.5",
    "express": "^4.21.1",
    "socket.io-client": "^4.8.0",
    "ts-node": "^10.9.2",
    "typescript": "^5.6.3"
  },
  "dependencies": {
    "copyfiles": "^2.4.1"
  }
}

PASOS PARA REPRODUCIR:

  1. Copiar el contenido de mi package.json a la carpeta raiz.
  2. Copiar el archivo main.ts a la raiz
  3. Copiar el archivo ts-config.json en la raiz.
  4. Crear una carpeta public y ahi dentro copiar los archivos public/index.html y public/main.js para realizar las pruebas con el cliente.
  5. Instalar las dependencias necesarias corriendo el comando npm install
  6. Por ultimo correr el comando npm run build de primeras para transpilar el codigo de manera adecuada y luego el comando npm start.

Resultado esperado:

Poder importar la libreria socket.io-client en el cliente para poder conectarme a un ws externo.

Nota: Se que esto debería ser teóricamente posible, puesto que por ejemplo hay gente que instala e importa jQuery (el cual es una librería del lado del cliente directamente con NPM).

Notese que entiendo que en este caso se podría usar simplemente un CDN y arreglar el error de manera sencilla, sin embargo la idea es aprender a como poder usar estos imports por medio de NPM de Node y a su vez poder usar los tipados de typescript.

Nota 2: No he configurado la aplicación de tal forma que refresque también archivos que no son de typescript en vivo, por lo que si quieres ver reflejado cambios en el HTML hay que hacer un build o rebuild de nuevo para que tome cambios con el HTML, lo arreglare mas adelante.

1 respuesta 1

0

Falta por las dependencias de desarrollo, su finalidad es únicamente ser utilizadas durante el desarrollo para soporte a TypeScript, que sirve solo para una verificación de tipos y otros recursos.

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

Al finalizar y compilar, ocurrió un error.

error TS1259: Module '"socket.io-client"' can only be default-imported using the 'esModuleInterop' flag

1 import io from "socket.io-client"; //FALLA ~~

node_modules/@types/socket.io-client/index.d.ts:9:5 9 export = io; ~~~~~~~~~~~~ This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.

Incluso dejando la configuración predeterminada del archivo tsconfig.:

"esModuleInterop": true,

o alterando a false, la importación genera un error

import io from "socket.io-client"; //FALLA

pero dejando comentado

// "esModuleInterop": true,

exc:

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

compila sin ningún error.

Esto sucede porque cuando no se activa la flag esModuleInterop, esa sintaxis de importación será compatible con TypeScript para módulos que usan export.

3
  • Este error no sucede en el compilador, sucede en el cliente (dentro de los logs del navegador), y he intentado tanto colocando esa flag como quitandola.
    – Layer
    Commented el 20 oct. a las 20:08
  • 1
    Seguí todos los pasos que dejé explicados y el error fue replicado en mi máquina... La solución que describí hizo que el programa se ejecutara con éxito y sin errores, el express junto con la biblioteca mencionada... No hubo errores en la consola ni en el navegador, todo se ejecutó sin ningún error Commented el 21 oct. a las 0:34
  • A mi esto no me ha funcionado usando solo tsc y los comandos que he dejado en el package.json, hay que tener en cuenta que no estoy usando un bundler, de casualidad usaste algo adicional en tu respuesta?, es que realmente ya intente todo lo que pusiste en la respuesta sin resultados (tanto instalar los tipos como cambiar el esModuleInterop a false).
    – Layer
    Commented el 23 oct. a las 5:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.