Build crashes with the ngx-scrollbar dependency installed

[marcauberer]

Reproduction

Steps to reproduce:

1. npm i ngx-scrollbar
2. npm run build:prod

Link to the failed GitHub Actions workflow: https://github.com/livepoll/live-poll/pull/87/checks?check_run_id=1586042128

Expected Behavior

Successful build

Actual Behavior

Build crashes with following error message:

Error: node_modules/ngx-scrollbar/lib/utils/resize-sensor.directive.d.ts:1:23 - error TS2688: Cannot find type definition file for 'resize-observer-browser'.

1 /// <reference types="resize-observer-browser" />
                        ~~~~~~~~~~~~~~~~~~~~~~~

Environment

• Angular: 11.0.5
• ngx-scrollbar: 7.5.0
• Browser(s): -
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[marcauberer]

Your fix did not work. The bug is still occurring. See https://github.com/livepoll/live-poll/pull/88/checks?check_run_id=1586935924

[MurhafSousli]

Hmmm, how can I get the same build error? do you use custom settings or just ng build?

[marcauberer]

Feel free to look at the project (https://github.com/livepoll/live-poll/tree/dependabot/npm_and_yarn/develop/ngx-scrollbar-7.5.2).

• Clone it
• Run npm i
• Run npm run build:prod

Then you shoud see the error. You also can try to setup a new project with the same dependencies / dependency versions as here: https://github.com/livepoll/live-poll/blob/49a272df82d05a937cca96ab55e2d8092d8235c3/package.json#L41

[MurhafSousli]

I need to use the ResizeObserver type which is still not officially released yet

Currently, I use the package @types/resize-observer-browser with /// <reference types="resize-observer-browser" /> as mentioned in this comment

I haven't got a build error! as you can see I the demo is deployed with angular cli default settings, could using /// <reference types="@types/resize-observer-browser" /> instead of /// <reference types="resize-observer-browser" /> fix the issue!

We need to verify that is the cause first before I release a new version, therefore would you mind npm i @types/resize-observer-browser -D in your project and try to build?

[marcauberer]

I already tried this:

Error: node_modules/resize-observer-polyfill/src/index.d.ts:13:15 - error TS2300: Duplicate identifier 'ResizeObserverCallback'.

13     interface ResizeObserverCallback {
                 ~~~~~~~~~~~~~~~~~~~~~~

  node_modules/@types/resize-observer-browser/index.d.ts:35:6
    35 type ResizeObserverCallback = (entries: ReadonlyArray<ResizeObserverEntry>, observer: ResizeObserver) => void;
            ~~~~~~~~~~~~~~~~~~~~~~
    'ResizeObserverCallback' was also declared here.
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;
                    ~~~~~~~~~~~

  node_modules/@types/resize-observer-browser/index.d.ts:39:14
    39     readonly contentRect: DOMRectReadOnly;
                    ~~~~~~~~~~~
    'contentRect' was also declared here.
node_modules/@types/resize-observer-browser/index.d.ts:35:6 - error TS2300: Duplicate identifier 'ResizeObserverCallback'.

35 type ResizeObserverCallback = (entries: ReadonlyArray<ResizeObserverEntry>, observer: ResizeObserver) => void;
        ~~~~~~~~~~~~~~~~~~~~~~

  node_modules/resize-observer-polyfill/src/index.d.ts:13:15
    13     interface ResizeObserverCallback {
                     ~~~~~~~~~~~~~~~~~~~~~~
    'ResizeObserverCallback' was also declared here.

[MurhafSousli]

Where did resize-observer-polyfill come from?

[ordomalleus]

An error also appeared

[ordomalleus]

If you add a dependency, then there is no error

[marcauberer]

Where did resize-observer-polyfill come from?

resize-observer-polyfill comes from the Ant UI library.
https://github.com/livepoll/live-poll/blob/2121dc7eb3f828f6ed28a4728baaf2bd3000b357/package-lock.json#L10432

[MurhafSousli]

Wait I got confused! there are 2 different errors

• 1: Duplicate identifier 'ResizeObserverCallback'. with resize-observer-polyfill package

• 2: Cannot find definition file if the package is not installed!

Can you summarise the situation, if you install @types/resize-observer-browser manually, the errors are gone and it build properly? or does still throw an error with resize-observer-polyfill ?

[marcauberer]

Yes,
so without having @types/resize-observer-browser installed, I got error no 2. Then I installed it in my project using your command: npm i @types/resize-observer-browser -D and then I got error no 1.
After looking in my package-lock.json file, I saw that the resize-observer-polyfill dependency was installed with the Ant UI library. This means that I cannot remove it, cause the dependency is required by Ant.

Looks like the resize-observer-browser and the resize-observer-polyfill dependencies are somewhat incompatible with one another. Do you know a fix for this problem?

[AsifDeveloper]

@MurhafSousli I am also getting the same issue.

Anyone please tell me the solution. Version I used: 7.5.2. Angular version 9

[votdev]

@MurhafSousli I am also getting the same issue.

Anyone please tell me the solution. Version I used: 7.5.2. Angular version 9

Same here with Angular 11.0.5.

[balajikr1994]

@MurhafSousli I am also getting the same issue.

Anyone please tell me the solution. Version I used: 7.5.2. Angular version 9

I'm also getting this issue!!!!!,,

[MurhafSousli]

Use v7.4.2 since nothing has changed https://github.com/MurhafSousli/ngx-scrollbar/blob/master/CHANGELOG.md

[marcauberer]

Yes. Version 7.4.2 works fine. Nevertheless, this error should be fixed sooner or later ...

[MurhafSousli]

fixed in v7.5.3

[marcauberer]

It works now! Thanks for your fast help.

[thu9999]

"@angular/core": "11.2.4",
"ngx-scrollbar": "^7.5.4",

I call ngScrollbar.update() caused the chrome and edge crashed. The issue did not happen in firefox.