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
ysocket.io-client
(derivado desocket.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 consideradeprecated
, dato importante por parte deNPM
.- 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:
- Copiar el contenido de mi
package.json
a la carpeta raiz. - Copiar el archivo
main.ts
a la raiz - Copiar el archivo
ts-config.json
en la raiz. - Crear una carpeta
public
y ahi dentro copiar los archivospublic/index.html
ypublic/main.js
para realizar las pruebas con el cliente. - Instalar las dependencias necesarias corriendo el comando
npm install
- Por ultimo correr el comando
npm run build
de primeras para transpilar el codigo de manera adecuada y luego el comandonpm 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 deNPM
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.