vite + typscript + vue3 build error

I followed every setps on your doc, but there are some error apeared on build process first, the package come without types, after check online,I add this node_modules/vite-plugin-pwa/client.d.ts into tsconfing to resolve the problem. However it only work on development mode, when i try to build the code, errors shows:

node_modules/vue-tsc/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/vue-tsc/typescript/lib/lib.webworker.d.ts:25:1
    25 interface AddEventListenerOptions extends EventListenerOptions {
       ~~~~~~~~~
    Conflicts are in this file.

node_modules/vue-tsc/typescript/lib/lib.dom.d.ts:4002:5 - error TS2374: Duplicate index signature for type 'number'.

4002     [index: number]: string;
         ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/vue-tsc/typescript/lib/lib.dom.d.ts:5252:5 - error TS2374: Duplicate index signature for type 'number'.

5252     [index: number]: File;
         ~~~~~~~~~~~~~~~~~~~~~~

node_modules/vue-tsc/typescript/lib/lib.webworker.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/vue-tsc/typescript/lib/lib.dom.d.ts:25:1
    25 interface AddEventListenerOptions extends EventListenerOptions {
       ~~~~~~~~~
    Conflicts are in this file.

node_modules/vue-tsc/typescript/lib/lib.webworker.d.ts:1131:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'DOMMatrixReadOnly' must be of type '{ new (init?: string | number[] | undefined): DOMMatrixReadOnly; prototype: DOMMatrixReadOnly; fromFloat32Array(array32: Float32Array): DOMMatrixReadOnly; fromFloat64Array(array64: Float64Array): DOMMatrixReadOnly; fromMatrix(other?: DOMMatrixInit | undefined): DOMMatrixReadOnly; toString(): string; }', but here has type '{ new (init?: string | number[] | undefined): DOMMatrixReadOnly; prototype: DOMMatrixReadOnly; fromFloat32Array(array32: Float32Array): DOMMatrixReadOnly; fromFloat64Array(array64: Float64Array): DOMMatrixReadOnly; fromMatrix(other?: DOMMatrixInit | undefined): DOMMatrixReadOnly; }'.

1131 declare var DOMMatrixReadOnly: {
                 ~~~~~~~~~~~~~~~~~

  node_modules/vue-tsc/typescript/lib/lib.dom.d.ts:3868:13
    3868 declare var DOMMatrixReadOnly: {
                     ~~~~~~~~~~~~~~~~~
    'DOMMatrixReadOnly' was also declared here.

node_modules/vue-tsc/typescript/lib/lib.webworker.d.ts:1228:5 - error TS2374: Duplicate index signature for type 'number'.

1228     [index: number]: string;
         ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/vue-tsc/typescript/lib/lib.webworker.d.ts:1546:5 - error TS2374: Duplicate index signature for type 'number'.

1546     [index: number]: File;
         ~~~~~~~~~~~~~~~~~~~~~~

node_modules/vue-tsc/typescript/lib/lib.webworker.d.ts:1683:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'FormData' must be of type '{ new (form?: HTMLFormElement | undefined): FormData; prototype: FormData; }', but here has type '{ new (): FormData; prototype: FormData; }'.

1683 declare var FormData: {
                 ~~~~~~~~

  node_modules/vue-tsc/typescript/lib/lib.dom.d.ts:5441:13
    5441 declare var FormData: {
                     ~~~~~~~~
    'FormData' was also declared here.

node_modules/vue-tsc/typescript/lib/lib.webworker.d.ts:2415:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'Notification' must be of type '{ new (title: string, options?: NotificationOptions | undefined): Notification; prototype: Notification; readonly permission: NotificationPermission; requestPermission(deprecatedCallback?: NotificationPermissionCallback | undefined): Promise<...>; }', but here has type '{ new (title: string, options?: NotificationOptions | undefined): Notification; prototype: Notification; readonly permission: NotificationPermission; }'.

2415 declare var Notification: {
                 ~~~~~~~~~~~~

  node_modules/vue-tsc/typescript/lib/lib.dom.d.ts:10797:13
    10797 declare var Notification: {
                      ~~~~~~~~~~~~
    'Notification' was also declared here.

node_modules/vue-tsc/typescript/lib/lib.webworker.d.ts:5878:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'onmessage' must be of type '((this: Window, ev: MessageEvent<any>) => any) | null', but here has type '((this: DedicatedWorkerGlobalScope, ev: MessageEvent<any>) => any) | null'.

5878 declare var onmessage: ((this: DedicatedWorkerGlobalScope, ev: MessageEvent) => any) | null;
                 ~~~~~~~~~

  node_modules/vue-tsc/typescript/lib/lib.dom.d.ts:18685:13
    18685 declare var onmessage: ((this: Window, ev: MessageEvent) => any) | null;
                      ~~~~~~~~~
    'onmessage' was also declared here.

node_modules/vue-tsc/typescript/lib/lib.webworker.d.ts:5879:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'onmessageerror' must be of type '((this: Window, ev: MessageEvent<any>) => any) | null', but here has type '((this: DedicatedWorkerGlobalScope, ev: MessageEvent<any>) => any) | null'.

5879 declare var onmessageerror: ((this: DedicatedWorkerGlobalScope, ev: MessageEvent) => any) | null;
                 ~~~~~~~~~~~~~~

  node_modules/vue-tsc/typescript/lib/lib.dom.d.ts:18686:13
    18686 declare var onmessageerror: ((this: Window, ev: MessageEvent) => any) | null;
                      ~~~~~~~~~~~~~~
    'onmessageerror' was also declared here.

node_modules/vue-tsc/typescript/lib/lib.webworker.d.ts:5896:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'location' must be of type 'Location', but here has type 'WorkerLocation'.

5896 declare var location: WorkerLocation;
                 ~~~~~~~~

  node_modules/vue-tsc/typescript/lib/lib.dom.d.ts:18296:13
    18296 declare var location: Location;
                      ~~~~~~~~
    'location' was also declared here.

node_modules/vue-tsc/typescript/lib/lib.webworker.d.ts:5900:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'navigator' must be of type 'Navigator', but here has type 'WorkerNavigator'.

5900 declare var navigator: WorkerNavigator;
                 ~~~~~~~~~

  node_modules/vue-tsc/typescript/lib/lib.dom.d.ts:18307:13
    18307 declare var navigator: Navigator;
                      ~~~~~~~~~
    'navigator' was also declared here.

node_modules/vue-tsc/typescript/lib/lib.webworker.d.ts:5901:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'onerror' must be of type 'OnErrorEventHandler', but here has type '((this: DedicatedWorkerGlobalScope, ev: ErrorEvent) => any) | null'.

5901 declare var onerror: ((this: DedicatedWorkerGlobalScope, ev: ErrorEvent) => any) | null;
                 ~~~~~~~

  node_modules/vue-tsc/typescript/lib/lib.dom.d.ts:18503:13
    18503 declare var onerror: OnErrorEventHandler;
                      ~~~~~~~
    'onerror' was also declared here.

node_modules/vue-tsc/typescript/lib/lib.webworker.d.ts:5902:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'onlanguagechange' must be of type '((this: Window, ev: Event) => any) | null', but here has type '((this: DedicatedWorkerGlobalScope, ev: Event) => any) | null'.

5902 declare var onlanguagechange: ((this: DedicatedWorkerGlobalScope, ev: Event) => any) | null;
                 ~~~~~~~~~~~~~~~~

  node_modules/vue-tsc/typescript/lib/lib.dom.d.ts:18684:13
    18684 declare var onlanguagechange: ((this: Window, ev: Event) => any) | null;
                      ~~~~~~~~~~~~~~~~
    'onlanguagechange' was also declared here.

node_modules/vue-tsc/typescript/lib/lib.webworker.d.ts:5903:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'onoffline' must be of type '((this: Window, ev: Event) => any) | null', but here has type '((this: DedicatedWorkerGlobalScope, ev: Event) => any) | null'.

5903 declare var onoffline: ((this: DedicatedWorkerGlobalScope, ev: Event) => any) | null;
                 ~~~~~~~~~

  node_modules/vue-tsc/typescript/lib/lib.dom.d.ts:18687:13
    18687 declare var onoffline: ((this: Window, ev: Event) => any) | null;
                      ~~~~~~~~~
    'onoffline' was also declared here.

node_modules/vue-tsc/typescript/lib/lib.webworker.d.ts:5904:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'ononline' must be of type '((this: Window, ev: Event) => any) | null', but here has type '((this: DedicatedWorkerGlobalScope, ev: Event) => any) | null'.

5904 declare var ononline: ((this: DedicatedWorkerGlobalScope, ev: Event) => any) | null;
                 ~~~~~~~~

  node_modules/vue-tsc/typescript/lib/lib.dom.d.ts:18688:13
    18688 declare var ononline: ((this: Window, ev: Event) => any) | null;
                      ~~~~~~~~
    'ononline' was also declared here.

node_modules/vue-tsc/typescript/lib/lib.webworker.d.ts:5905:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'onrejectionhandled' must be of type '((this: Window, ev: PromiseRejectionEvent) => any) | null', but here has type '((this: DedicatedWorkerGlobalScope, ev: PromiseRejectionEvent) => any) | null'.

5905 declare var onrejectionhandled: ((this: DedicatedWorkerGlobalScope, ev: PromiseRejectionEvent) => any) | null;
                 ~~~~~~~~~~~~~~~~~~

  node_modules/vue-tsc/typescript/lib/lib.dom.d.ts:18692:13
    18692 declare var onrejectionhandled: ((this: Window, ev: PromiseRejectionEvent) => any) | null;
                      ~~~~~~~~~~~~~~~~~~
    'onrejectionhandled' was also declared here.

node_modules/vue-tsc/typescript/lib/lib.webworker.d.ts:5906:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'onunhandledrejection' must be of type '((this: Window, ev: PromiseRejectionEvent) => any) | null', but here has type '((this: DedicatedWorkerGlobalScope, ev: PromiseRejectionEvent) => any) | null'.

5906 declare var onunhandledrejection: ((this: DedicatedWorkerGlobalScope, ev: PromiseRejectionEvent) => any) | null;
                 ~~~~~~~~~~~~~~~~~~~~

  node_modules/vue-tsc/typescript/lib/lib.dom.d.ts:18694:13
    18694 declare var onunhandledrejection: ((this: Window, ev: PromiseRejectionEvent) => any) | null;
                      ~~~~~~~~~~~~~~~~~~~~
    'onunhandledrejection' was also declared here.

node_modules/vue-tsc/typescript/lib/lib.webworker.d.ts:5910:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'self' must be of type 'Window & typeof globalThis', but here has type 'WorkerGlobalScope & typeof globalThis'.

5910 declare var self: WorkerGlobalScope & typeof globalThis;
                 ~~~~

  node_modules/vue-tsc/typescript/lib/lib.dom.d.ts:18338:13
    18338 declare var self: Window & typeof globalThis;
                      ~~~~
    'self' was also declared here.


Found 20 errors.

[fonsp]

🎉 You can do tsc --skipDefaultLibCheck instead of tsc to skip checking the lib.dom.d.ts and lib.webworker.d.ts files.

[CHENQIKUAI]

build with “vite build” not “tsc && vite build” 🙂