Typescript conflict between dom and webworker when upgrading to 6.5.0

[huineng]

workbox-webpack-plugin devDep 6.4.1 ❯ 6.5.0 typescript": "^4.5.5 "@types/workbox-webpack-plugin": "^5.1.8",

When upgrading and compiling i hit the following error

node_modules/workbox-core/types.d.ts:14:12 - error TS2304: Cannot find name 'ExtendableEvent'.

14     event: ExtendableEvent;
              ~~~~~~~~~~~~~~~

but when adding webworker to lib

"lib": ["esnext", "dom","webworker"]

i hit a bunch of other errors, conflicts

node_modules/typescript/lib/lib.dom.d.ts:25:1 - error TS6200: Definitions of the following identifiers conflict with those in another 
file: ImportExportKind, TableKind, ValueType, ExportValue, Exports, ImportValue, Imports, ModuleImports, name, 
AlgorithmIdentifier, BigInteger, BinaryData, BlobPart, BodyInit, BufferSource, CanvasImageSource, DOMHighResTimeStamp, 
DOMTimeStamp, EventListenerOrEventListenerObject, Float32List, FormDataEntryValue, GLbitfield, GLboolean, GLclampf, 
GLenum, GLfloat, GLint, GLint64, GLintptr, GLsizei, GLsizeiptr, GLuint, GLuint64, HashAlgorithmIdentifier, HeadersInit, 
IDBValidKey, ImageBitmapSource, Int32List, MessageEventSource, NamedCurve, OnErrorEventHandler, PerformanceEntryList, 
ReadableStreamController, ReadableStreamDefaultReadResult, ReadableStreamReader, RequestInfo, TexImageSource, 
TimerHandler, Transferable, Uint32List, VibratePattern, XMLHttpRequestBodyInit, BinaryType, ClientTypes, ColorGamut, 
ColorSpaceConversion, ConnectionType, EndingType, FontFaceLoadStatus, FontFaceSetLoadStatus, HdrMetadataType, 
IDBCursorDirection, IDBRequestReadyState, IDBTransactionMode, ImageOrientation, KeyFormat, KeyType, KeyUsage, 
MediaDecodingType, MediaEncodingType, NotificationDirection, NotificationPermission, PermissionName, PermissionState, 
PredefinedColorSpace, PremultiplyAlpha, PushEncryptionKeyName, PushPermissionState, ReferrerPolicy, RequestCache, 
RequestCredentials, RequestDestination, RequestMode, RequestRedirect, ResizeQuality, ResponseType, 
SecurityPolicyViolationEventDisposition, ServiceWorkerState, ServiceWorkerUpdateViaCache, TransferFunction, VisibilityState, 
WebGLPowerPreference, WorkerType, XMLHttpRequestResponseType

25 interface AddEventListenerOptions extends EventListenerOptions {
   ~~~~~~~~~

  node_modules/typescript/lib/lib.webworker.d.ts:25:1
    25 interface AddEventListenerOptions extends EventListenerOptions {
       ~~~~~~~~~
    Conflicts are in this file.

i need to include dom otherwise i get errors there

how can i resolve this ?

thanks

[jeffposnick]

A few things:

• You (ideally!) shouldn't need @types/workbox-webpack-plugin if you've updated to workbox-webpack-plugin v6.5.0. The official package now includes an index.d.ts with the TypeScript types, based on the package's source.
• I'm not sure that this is specific to v6.5.0, but generally speaking, you shouldn't include dom in the list of libs for your TypeScript configuration when compiling a service worker. The service worker runtime environment exposes a different global interface that what dom expects.

What I'd recommend doing is either create a separate tsconfig.json for your service worker, or alternatively, add something like this to the top of your service worker's TypeScript:

/// <reference lib="webworker" />
declare const self: ServiceWorkerGlobalScope;

You mention that you're using TypeScript 4.5.5, and there were some changes introduced there to give developers more flexibility in referencing libraries.

[huineng]

as there was no way to solve this ..

my mini-css-extract-plugin needed dom and workbox-webpack-plugin needed webworker. but as i only needed ExtendableEvent which was no more then a a few lines

interface ExtendableEvent extends Event {
    waitUntil(f: any): void;
}

i loaded those line into a d.ts file in the same directory as my ts files and i did no longer needed to include webworker and it all compiled

[jeffposnick]

It sounds like you have a workaround, so I'm going to close this issue.

But was using a different TypeScript configuration for each of those compilations not an option?

[pragmat1c]

What I'd recommend doing is either create a separate tsconfig.json for your service worker,

@jeffposnick But how does this work when web pack is creating the service worker?

https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/#generatesw-plugin