DefinitelyTyped / DefinitelyTyped/DefinitelyTyped

[@types/chrome & @types/filesystem]: unable to use with "WebWorker" lib due to DOM lib dependencies

Open
#51,290 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
51.4k
Forks
30.4k
Avg merge
3d 21h
Merged PRs (30d)
108

Description

I am working on a service worker for a chrome extension. My tsconfig.json looks like this (only showing relevant parts):

{
  "compilerOptions": {
    "lib": [
      "ESNext",
      "WebWorker"
    ],
    "types": [
      "chrome",
    ],
    //...
  },
}

Unfortunately, it is not possible to use the chrome types along with the WebWorker lib. There are 2 cases where the chrome types are relying on DOM typings: one in @types/chrome, another in @types/filesystem on which chrome types depend. When I run tsc, this is what I get:

node_modules/@types/chrome/index.d.ts:7084:73 - error TS2304: Cannot find name 'MediaStream'.

7084     export function capture(options: CaptureOptions, callback: (stream: MediaStream | null) => void): void;
                                                                             ~~~~~~~~~~~

node_modules/@types/filesystem/index.d.ts:369:11 - error TS2304: Cannot find name 'DOMError'.

369     (err: DOMError): void;
              ~~~~~~~~

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b82e82bf3969518de5970425673868d87d4e676b/types/chrome/index.d.ts#L7505

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b82e82bf3969518de5970425673868d87d4e676b/types/filesystem/index.d.ts#L365-L370

My current workaround is to augment the global types in a global-augmentations.d.ts as such:

/**
 * Since our background script is a WebWorker, we omit the `dom` typings from our TS config. Unfortunately,
 * the `chrome` types have some dependencies to the `dom` lib. To work around this, we currently
 * provide empty versions of the interfaces.
 */

interface DOMError {}
interface MediaStream {}

I am not entirely sure what the right solution is here. Using the DOM lib instead of WebWorker could cause me to accidentally try to use DOM properties (e.g. window). And I can see why those types would be needed in those libs. Perhaps the right thing to do is to split up the chrome types into multiple definitions so that WebWorker projects can avoid importing definitions that are tied to the DOM?

@types/chrome contributors: @matthewkimber, @otiai10, @couven92, @rreverser, @sreimer15, @MatCarlson, @ekinsol, @tregagnon, @echoabstract, @spasma, @bdbai, @pokutuna

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with types/chrome/index.d.ts around the MediaStream reference and types/filesystem/index.d.ts around the DOMError callback, then reproduce the errors with the WebWorker-only tsconfig shown in the issue. Determine a type-definition arrangement that works without importing DOM typings, and verify that tsc succeeds while DOM-only globals remain unavailable.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.