Definitelytyped: [workbox-sw] Cannot find name 'FetchEvent'

[liveangela]

description

when using @types/workbox-sw in a PWA project made by vue-cli3,
it went wrong while building, as the error message is:

ERROR in .../node_modules/@types/workbox-sw/index.d.ts
131:9 Cannot find name 'FetchEvent'.
    129 |
    130 | interface ICacheStrategyHandleOptions {
  > 131 |       event: FetchEvent;
        |              ^
    132 | }
    133 |
    134 | interface ICacheStrategyMakeRequestOptions {

env

version: 3.2.0
tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "node"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

---

If you know how to fix the issue, make a pull request instead.

• [x] I tried using the @types/xxxx package and had problems.
• [ ] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [ ] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @wessberg
  
  

If you do not mention the authors the issue will be ignored.

[wessberg]

Does it solve the problem if you add webworker to the lib array?

[liveangela]

it works after adding the lib webworker to use 'FetchEvent' but many other problems occured.
The main reason should be 'DOM and ServiceWorker were used in one tsconfg file at the same time'.

as is mentioned here

Web workers can't access to DOM, window, document and parent objects (full list supported objects here: Functions and classes available to Web Workers); the dom lib of TypeScript is not compatible and redefine some elements that are define in lib.webworker.d.ts

so, maybe two different tsconfig file should be used when DOM and ServiceWorker woking in one project, but it's not related for this issue any more

tons of thx for reply~

[wessberg]

Great to hear that it worked. This issue can be closed.

As for what you're experiencing with clashes between multiple varying declarations of the same types and interfaces, this is most likely due to clashes between the built-in libs you're bringing in and community-driven typings published on @types. This is unrelated to your original question, but I don't think that there are clashes between dom.d.ts and webworker.d.ts as of the current version of Typescript. Could it be that the conflicts come from external types brought in via @types?

Nevertheless, yes, I agree that having a tsconfig in the root of the folder containing your Service Worker-related code that extends your base config, but declares different libs, can be a good idea for linting (e.g. disallows DOM-specific operations)

[liveangela]

there do are clashed between dom.d.ts and webworker.d.ts.
after @types/workbox-sw been removed from the project (just pure vue ts file, no other @types included),
errors still occured as:

// in lib/lib.webworkder.d.ts
    23 | /////////////////////////////
    24 |
  > 25 | interface AddEventListenerOptions extends EventListenerOptions {
       | ^
    26 |     once?: boolean;
    27 |     passive?: boolean;
    28 | }

due to

Definitions of the following identifiers conflict with those in another file: EventListenerOrEventListenerObject, BlobPart, HeadersInit, BodyInit, RequestInfo, DOMHighResTimeStamp, PerformanceEntryList, PushMessageDataInit, VibratePattern, BufferSource, DOMTimeStamp, FormDataEntryValue, IDBValidKey, MessageEventSource, BinaryType, ClientTypes, IDBCursorDirection, IDBRequestReadyState, IDBTransactionMode, NotificationDirection, NotificationPermission, PushEncryptionKeyName, PushPermissionState, ReferrerPolicy, RequestCache, RequestCredentials, RequestDestination, RequestMode, RequestRedirect, ResponseType, ServiceWorkerState, ServiceWorkerUpdateViaCache, VisibilityState, WorkerType,
XMLHttpRequestResponseType

base config extends should be worth a try
thx for your suggestion again

[NurdinDev]

I WANT HELP

I make other config file and extended as well but I still have the problem about Cannot find name 'FetchEvent'. here a snippet of the config

configs/base.json

{
  "compilerOptions": {
    "lib": [
      "webworker"
    ]
  }
}

tsconfig.json

{
  "extends": "./configs/base",
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": [
      "es6",
      "dom"
    ],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

[liveangela]

@NuruddinBadawi how about reverse the content of these two files?

[NurdinDev]

I did

it appears other error Cannot find global type 'Promise'.

I try to fixed by install npm i --save @types/es6-promise

but not work.

[liveangela]

@NuruddinBadawi it's due to writing both dom and sw code in one project, all you need to do is spliting these two kinds of logic codes into different project (maybe different directory is enough), and use different tsconfig file for them

[NurdinDev]

sorry, I didn't get the point, what you mean the logic code is it means splitting configs? or if code which code you mean?

if anyone has done something like this please share with me.