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/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @typescript-eslint/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
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
