Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Error when compiling: Property 'contentRect' must be of type 'DOMRectReadOnly' #80

Open
wendellestradairely opened this issue Jan 24, 2021 · 18 comments
Open

Error when compiling: Property 'contentRect' must be of type 'DOMRectReadOnly' #80

wendellestradairely opened this issue Jan 24, 2021 · 18 comments

Comments

@wendellestradairely
Copy link 

Compiling TypeScript sources through NGC
ERROR: node_modules/resize-observer-polyfill/src/index.d.ts:19:18 - error TS2717: Subsequent property declarations must have the same type.  Property 'contentRect' must be of type 'DOMRectReadOnly', but here has type 'DOMRectReadOnly'.

19         readonly contentRect: DOMRectReadOnly;
                    ~~~~~~~~~~~
@wendellestradairely wendellestradairely changed the title Error when compiling Error when compiling: Property 'contentRect' must be of type 'DOMRectReadOnly' Jan 24, 2021
@wendellestradairely
Copy link
Author

I think this happens when "@types/resize-observer-browser" is also installed.

@alecgibson
Copy link

We don't have @types/resize-observer-browser installed, but also get this issue.

@alecgibson
Copy link

The issue is because the latest version of TypeScript ships with an official type definition, which this library conflicts with.

@grosch
Copy link

grosch commented Feb 24, 2021

How do we resolve? I'm getting this package because another one I install depends on it.

@alecgibson
Copy link

alecgibson commented Feb 25, 2021 •
edited
Loading

We've quick-fixed it by just using:

const ResizeObserverPolyfill = require('resize-observer-polyfill');

const observer: ResizeObserver = new ResizeObserverPolyfill();

But that obviously only works if you have a direct dependency on it.

I guess you'd have to reach out to whichever library is using it, and ask them to do something about it?

@albancreton albancreton mentioned this issue Feb 25, 2021
Open
@grosch
Copy link

grosch commented Mar 4, 2021

Is there any ETA on this getting officially fixed?

@juzeppe9000
Copy link

When this fix will be merged into master?

undergroundwires added a commit to undergroundwires/privacy.sexy that referenced this issue Mar 11, 2021
@undergroundwires
bump dependencies to latest
1f515e7 
- fix npm vulnerabilities #62
- change ResizeObserver polyfill dependency que-etc/resize-observer-polyfill#80
- bump typescript to 4.2.x and add tslib for importing helpers
- update electron to v12.x and set contextIsolation to false (nklayman/vue-cli-plugin-electron-builder#1285, electron/electron#11608) to reach node APIs as it's now disabled by default (electron/electron#27949)
gkalpak added a commit to angular/ngcc-validation that referenced this issue Mar 19, 2021
@gkalpak
build: enable skipLibCheck TS config option
b9d1bae 
This allows ignoring the error that is thrown due to the incompatibility
of the typings in `resize-observer-polyfill` version <=1.5.1 with
TypeScript version >=4.2 (see que-etc/resize-observer-polyfill#80).

Besides that, setting `skipLibCheck` to `true` is a recommended setting
and will avoid unnecessary work.
gkalpak added a commit to angular/ngcc-validation that referenced this issue Mar 19, 2021
@gkalpak
build: enable skipLibCheck TS config option
a90aa5d 
This allows ignoring the error that is thrown due to the incompatibility
of the typings in `resize-observer-polyfill` version <=1.5.1 with
TypeScript version >=4.2. See also:
- https://circleci.com/gh/angular/ngcc-validation/28399
- que-etc/resize-observer-polyfill#80

Besides that, setting `skipLibCheck` to `true` is a recommended setting
and will avoid unnecessary work.
gkalpak added a commit to angular/ngcc-validation that referenced this issue Mar 19, 2021
@gkalpak
build: enable skipLibCheck TS config option
4f61ef0 
This allows ignoring the error that is thrown due to the incompatibility
of the typings in `resize-observer-polyfill` version <=1.5.1 with
TypeScript version >=4.2. See also:
- https://circleci.com/gh/angular/ngcc-validation/28399
- que-etc/resize-observer-polyfill#80

Besides that, setting `skipLibCheck` to `true` is a recommended setting
and will avoid unnecessary work.
TuckerWhitehouse added a commit to Workgrid/workgrid-javascript that referenced this issue Mar 20, 2021
@TuckerWhitehouse
Replace resize-observer-polyfill with @juggle/resize-observer to fix …
fd55d86 
…typescript errors (que-etc/resize-observer-polyfill#80)
gkalpak added a commit to angular/ngcc-validation that referenced this issue Mar 22, 2021
@gkalpak
build: enable skipLibCheck TS config option
926964a 
This allows ignoring the error that is thrown due to the incompatibility
of the typings in `resize-observer-polyfill` version <=1.5.1 with
TypeScript version >=4.2. See also:
- https://circleci.com/gh/angular/ngcc-validation/28399
- que-etc/resize-observer-polyfill#80

Besides that, setting `skipLibCheck` to `true` is a recommended setting
and will avoid unnecessary work.
gkalpak added a commit to angular/ngcc-validation that referenced this issue Mar 24, 2021
@gkalpak
build: enable skipLibCheck TS config option
9deff30 
This allows ignoring the error that is thrown due to the incompatibility
of the typings in `resize-observer-polyfill` version <=1.5.1 with
TypeScript version >=4.2. See also:
- https://circleci.com/gh/angular/ngcc-validation/28399
- que-etc/resize-observer-polyfill#80

Besides that, setting `skipLibCheck` to `true` is a recommended setting
and will avoid unnecessary work.
gkalpak added a commit to angular/ngcc-validation that referenced this issue Mar 24, 2021
@gkalpak
build: enable skipLibCheck TS config option
78267b7 
This allows ignoring the error that is thrown due to the incompatibility
of the typings in `resize-observer-polyfill` version <=1.5.1 with
TypeScript version >=4.2. See also:
- https://circleci.com/gh/angular/ngcc-validation/28399
- que-etc/resize-observer-polyfill#80

Besides that, setting `skipLibCheck` to `true` is a recommended setting
and will avoid unnecessary work.
@dafo dafo mentioned this issue Apr 15, 2021
Merged
14 tasks
@HristoP96
Copy link

I guess a resolution for this issue is to change the resize observer. We switched it with @juggle/resize-observer with small additional changes and this resolved the issue.

@deefour
Copy link

deefour commented Apr 28, 2021

@HristoP96 thank you for pointing this out!! 👊

@BenLune
Copy link

BenLune commented May 14, 2021

@HristoP96 thank you too ! Just had the problem after switching to angular 12 using typescript 4.2.4.
I'll give a try to @juggle/resize-observer

@janryWang janryWang mentioned this issue May 19, 2021
Open
1 task
@AruljothySundaramoorthy
Copy link

Guys there is fix for this "skipLibCheck": true," in your tsconfig.json and recompile the applicaiton

@CarlosAmaral
Copy link

@BenLune any luck? have the same issue when upgrading to Angular 12.

@viktor-berezin
Copy link

@BenLune any luck? have the same issue when upgrading to Angular 12.

Angular 12 supports and actually requires typescript 4.2. As option you can just remove resize-observer-polyfill module at all. You can use ResizeObserver definition exactly from typescript package.

@bladey bladey mentioned this issue May 31, 2021
Closed
1 task
@Sina7312
Copy link

Sina7312 commented May 31, 2021 •
edited
Loading

You can try adding "skipLibCheck" option in tsconfig.json if the underlying libraries are using it

https://www.typescriptlang.org/tsconfig#skipLibCheck

This was referenced Jun 11, 2021
Closed
Closed
@shirisha-96
Copy link

Guys there is fix for this "skipLibCheck": true," in your tsconfig.json and recompile the applicaiton

thank you.worked for me.

@JaylanChen JaylanChen mentioned this issue Jun 23, 2021
Closed
@fotsohilaire
Copy link

bonsoir l équipe j ai eu le même problème que faire

@AruljothySundaramoorthy
Copy link

image

By using this method i can run my application now.

This was referenced Nov 18, 2021
Merged
Merged
@PengJiyuan PengJiyuan mentioned this issue Nov 22, 2021
Open
@johnrjj johnrjj mentioned this issue Dec 22, 2021
Merged
@The-End-Hero The-End-Hero mentioned this issue Jan 24, 2022
Closed
@lemald lemald mentioned this issue Mar 11, 2022
Merged
@AMoo-Miki AMoo-Miki mentioned this issue Mar 25, 2022
Merged
7 tasks
jonastieppo added a commit to jonastieppo/resize-observer-polyfill that referenced this issue Jan 27, 2023
@jonastieppo
Update index.d.ts to avoid erros with new TS
7b76b34 
This unique line solves the following error when updating for newer TS versions:

Error: node_modules/resize-observer-polyfill/src/index.d.ts:19:18 - error TS2717: Subsequent property declarations must have the same type.  Property 'contentRect' must be of type 'DOMRectReadOnly', but here has type 'DOMRectReadOnly'.

It is related with issues que-etc#80, que-etc#53 and que-etc#73.
@jonastieppo jonastieppo mentioned this issue Jan 27, 2023
Open
@seremwen
Copy link

seremwen commented Feb 8, 2023

You can try adding "skipLibCheck" option in tsconfig.json if the underlying libraries are using it

https://www.typescriptlang.org/tsconfig#skipLibCheck

Thhank you. This worked for me.

LarrMarburger pushed a commit to LarrMarburger/privacy.sexy that referenced this issue Nov 16, 2023
@undergroundwires
bump dependencies to latest
8e1fc11 
- fix npm vulnerabilities #62
- change ResizeObserver polyfill dependency que-etc/resize-observer-polyfill#80
- bump typescript to 4.2.x and add tslib for importing helpers
- update electron to v12.x and set contextIsolation to false (nklayman/vue-cli-plugin-electron-builder#1285, electron/electron#11608) to reach node APIs as it's now disabled by default (electron/electron#27949)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests