0

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

0 Answers0