I'm actually working on an chrome extension and I keep receiving this error while I'm importing the unpacked extension :
Uncaught TypeError: Failed to resolve module specifier "socket.io-client". Relative references must start with either "/", "./", or "../".
I hope you could give me so advices and also answers as much as you can do for me. I've been searchin' here for a while but no one seems to have the same problem in TypeScript with the manifest v3 and the import problem for socket-io.client.
My manifest.json :
{
"name": "__MSG_extensionName__",
"description": "__MSG_extensionDescription__",
"version": "1.0",
"manifest_version": 3,
"default_locale": "fr",
"host_permissions": ["*://*/*"],
"background": {
"service_worker": "background/index.js",
"type": "module"
},
"action": {
"default_popup": "popup/popup.html",
"default_icon": {
"16": "img/default_16.png",
"32": "img/default_32.png",
"48": "img/default_48.png",
"128": "img/default_128.png",
"256": "img/default_256.png"
}
},
"permissions": [
"background",
"tabs",
"unlimitedStorage",
"notifications"
]
}
My tsconfig.ts file :
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"declaration": false,
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictBindCallApply": true,
"resolveJsonModule": true,
"allowJs": true,
"allowUmdGlobalAccess": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": true,
"moduleResolution": "Node",
"baseUrl": "./",
"outDir": "dist",
"paths": {},
"typeRoots": ["node_modules/@types"],
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"jsx": "react",
"allowSyntheticDefaultImports": true
},
"include": [
"src/**/*"
]
}
And also the 3 files that use the socket-io client The index.ts in background folder :
import { start as socketIoStart } from './socket-io.js'
import { start as notificationStart } from "./notification.js";
socketIoStart();
notificationStart();
The socket-io.client.ts :
import { io } from "../dependencies/index.js";
import { handler } from "./handler.js";
/* Connects to the socket server */
const socket = io.connect("https://somewhere");
export const start = () => {
socket.on("connect", function () {
console.log("Client connected");
});
socket.on("stream-status", (liveInformation) => {
console.log("stream-status", liveInformation);
handler(liveInformation);
});
socket.on("disconnect", (reason) => {
if (reason === "io server disconnect") {
// the disconnection was initiated by the server, you need to reconnect manually
socket.connect();
}
// else the socket will automatically try to reconnect
});
};
The dependancies index.ts:
export * as io from "socket.io-client";
Best Regards