Uncaught TypeError while importing socket.io in client side Typescript file

Viewed 316

I have a small node.js app using express and written in Typescript.

I am attempting to use socket.io in a client side Typescript file, but I receive an error in the browser when attempting to load the page:

Uncaught TypeError: Error resolving module specifier “socket.io-client”. Relative module specifiers must start with “./”, “../” or “/”.

My project is using ES6 Modules. I am attempting to import the socket.io in the client TS file as shown in the documentation:

import { io } from "socket.io-client";

I have installed the socket.io client and server packages with NPM.

If I remove the import from the compiled javascript file and add the script to my html page like below it works fine:

<script type="module" src="/javascript/app.js"></script>

But if I remove the import from the Typescript file it will not compile, with the message: error TS2304: Cannot find name 'io'. which is in reference to this line: const socket = io();

My installed node packages:

├── @tsconfig/node12@1.0.7
├── @types/express@4.17.12
├── @types/node@15.6.1
├── @typescript-eslint/eslint-plugin@4.26.0
├── eslint-config-airbnb-base@14.2.1
├── eslint-config-prettier@8.3.0
├── eslint-plugin-import@2.23.4
├── eslint-plugin-prettier@3.4.0
├── eslint@7.27.0
├── express@4.17.1
├── nodemon@2.0.7
├── prettier@2.3.0
├── socket.io-client@4.1.2
├── socket.io@4.1.2
└── typescript@4.3.2

tsconfig.json:

{
  "extends": "@tsconfig/node12/tsconfig.json",
  "compilerOptions": {
    "outDir": "dist/",
    "rootDir": "src/",
    "lib": ["dom"],
    "module": "esnext",
    "moduleResolution": "node",
    "declaration": true
  },
  "include": ["src/"]
}

package.json:

{
  "name": "jacynth",
  "version": "1.0.0",
  "description": "Jacynth game",
  "main": "dist/server.js",
  "type": "module",
  "scripts": {
    "start": "node server",
    "dev": "nodemon server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Dylan Cairns",
  "license": "CC-BY-SA-3.0",
  "dependencies": {
    "@types/express": "^4.17.12",
    "express": "^4.17.1",
    "socket.io": "^4.1.2",
    "socket.io-client": "^4.1.2",
    "typescript": "^4.3.2"
  },
  "devDependencies": {
    "@tsconfig/node12": "^1.0.7",
    "@types/node": "^15.6.1",
    "@typescript-eslint/eslint-plugin": "^4.26.0",
    "eslint": "^7.27.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-prettier": "^3.4.0",
    "nodemon": "^2.0.7",
    "prettier": "^2.3.0"
  }
}

Any assistance resolving this module import issue would be much appreciated. Thank you

1 Answers

Looks like it needs some build tools to be possible to import like that.

Try this instead:

import { io } from "https://cdn.socket.io/4.4.1/socket.io.esm.min.js"
Related