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

[wendellestradairely]

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]

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

[alecgibson]

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

[alecgibson]

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

[grosch]

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

[alecgibson]

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?

[grosch]

Is there any ETA on this getting officially fixed?

[juzeppe9000]

When this fix will be merged into master?

[HristoP96]

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]

@HristoP96 thank you for pointing this out!! :fist_oncoming:

[BenLune]

@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

[AruljothySundaramoorthy]

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

[CarlosAmaral]

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

[viktor-berezin]

@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.

[Sina7312]

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

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

[shirisha-96]

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

thank you.worked for me.

[fotsohilaire]

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

[AruljothySundaramoorthy]

By using this method i can run my application now.

[seremwen]

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.