Chrome扩展清单V3：尝试导入socket-io.client但不断收到错误

Question

我实际上正在开发一个 chrome 扩展，并且在导入解压的扩展时不断收到此错误：

未捕获的类型错误：无法解析模块说明符 “socket.io-客户端”。相对引用必须以“/”开头， “./”或“../”。

希望您能尽可能多地为我提供建议和解答。我在这里搜索了一段时间，但似乎没有人在 TypeScript 中遇到与清单 v3 相同的问题以及 socket-io.client 的导入问题。

我的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"
  ]
}

我的 tsconfig.ts 文件：

{
  "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/**/*"
  ]
}

还有使用socket-io客户端的3个文件 后台文件夹中的index.ts：

import { start as socketIoStart } from './socket-io.js'
import { start as notificationStart } from "./notification.js";

socketIoStart();
notificationStart();

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
  });
};

依赖索引.ts：

export * as io from "socket.io-client";

致以诚挚的问候

Answer 1

您可以在此链接中找到答案，我尝试过并工作过 https://github.com/socketio/socket.io/discussions/4623