ERROR Cannot read property 'id' of undefined

[Alessandroinfo]

Hi. I retrieve this error: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'id' of undefined when i add the module OverlayscrollbarsModule. I use it on Angular 9.

[KingSora]

Good day!

Are you sure this is comming from the library itself? Can you give me the filename and number of the line in which this error is occurring?

[KingSora]

@Alessandroinfo anything new here?

[ghost]

@KingSora I can confirm the issue:

• Create new NG project with 9.0.5 CLI
• Add overlayscrollbars, overlayscrollbars-ngx and @types/overlayscrollbars
• Add CSS to styles.scss
• Add OverlayscrollbarsModule to imports
• Add "allowSyntheticDefaultImports": true to tsconfig compilerOptions
• Throw overlay-scrollbars somewhere into the app.component.html
• npm run start

You'll get:

core.js:35930 Uncaught TypeError: Cannot read property 'id' of undefined
    at registerNgModuleType (core.js:35930)
    at core.js:35948
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:35944)
    at new NgModuleFactory$1 (core.js:36106)
    at compileNgModuleFactory__POST_R3__ (core.js:41880)
    at PlatformRef.bootstrapModule (core.js:42245)
    at Module../src/main.ts (main.ts:11)
    at __webpack_require__ (bootstrap:79)
    at Object.0 (main.ts:12)

[KingSora]

@FSDRE Thank you, I'll try to reproduce it as soon as I have time. Do you know wheter the CLI version is the cause.. (does it also happen with 8.x?)

[ghost]

@KingSora Just tried it with the latest NG 8.3.25 and it works. We also have a full blown NG 8.2.14 project running with OS perfectly. So I think we have a 9.x incompatibility issue. Saw a couple libraries fail the last couple of days because NG 9 does so many things differently but most of the issues were not of a very complicated nature. I hope this right here is also an easy one 😄

[KingSora]

@FSDRE Alright... I'll look into this! :)

[KingSora]

@Alessandroinfo @FSDRE could you try running the command npx ngcc? This should solve the issue.

[ghost]

@KingSora Interesting... I'll try that on monday. But is that a one time compile after installing the npm package or do I have to run it on every ng serve?

It really hurts that IE11 is still a thing for certain projects. Could just get rid of the browser property and smile 😄

[ghost]

@KingSora I can confirm that npx ngcc works

[laino]

I removed the "browser": ... property from overlayscrollbars-ngx's package.json, ran a clean webpack build, and voila it works without doing anything else.

[ghost]

@laino But the browser property was the fix for #166 so you cannot just remove it again.

[laino]

I run my entire build through babel anyways, so it shouldn't be an issue (I think).

[ghost]

@laino Sure you can help yourself with that but @KingSora needs a general fix for his library in order make it run for everybody again.

[laino]

Yeah I'm not saying they should just remove that line in their project. I just left that comment there as input and for the next person stumbling upon this via google. Some people just need to get a working build out the door first and foremost.

[KingSora]

@laino @FSDRE the fix will probably look like this. The PR for #166 will be reverted in the future. (see this comment: https://github.com/angular/angular/issues/36062#issuecomment-599055541 and the comment above)

[TomTomB]

The issue is probably due to how the library is compiled. Switching to ng-packagr should fix it.
Until then, there are 2 workarounds:

• Disable Angular Ivy inside the tsconfig.json file

  {
  "compilerOptions": {
  [...]
  },
  "angularCompilerOptions": {
   "enableIvy": false
  }
  }

• OR: Copy the overlayscrollbars.component.ts from this library into your own project and use it like a regular component. Don´t forget to remove the OverlayscrollbarsModule import from your modules.

[KingSora]

@TomTomB @FSDRE @laino @Alessandroinfo please try the new overlayscrollbars-ngx version v0.2.2 where this bug should be fixed!

[ghost]

@KingSora Your fix does compile now but your package still requires Angular 7 as dev dependency. Ivy is not available on Angular 7, so all ng packages have to be migrated as well (e.g. "@angular/core": ">=8.0.0")

[KingSora]

@KatzeKahn The package requires Angular 7 as a peerDependency, but its also perfectly useable with higher Angular versions. I need to change that in the next release, youre right...

The Example app is written with Angular 7 but since this is just a example it wasn't a hight priority of mine to update it to v9.. But I'll also change that in the future. Thanks!

[ghost]

@KingSora I can confirm that it works in NG9 now. There are 2 warnings:

Warning: Unable to fully load C:/FS/Visual Studio Code/over/node_modules/overlayscrollbars-ngx/ngc/src/overlayscrollbars.component.js for source-map flattening: ENOENT: no such file or directory, lstat 'C:/FS/Visual Studio Code/over/node_modules/overlayscrollbars-ngx/ngc/src/overlayscrollbars.component.js.map'

Warning: Unable to fully load C:/FS/Visual Studio Code/over/node_modules/overlayscrollbars-ngx/ngc/src/overlayscrollbars.module.js for source-map flattening: ENOENT: no such file or directory, lstat 'C:/FS/Visual Studio Code/over/node_modules/overlayscrollbars-ngx/ngc/src/overlayscrollbars.module.js.map'

It tries to pull the sourcemaps from src instead of dist

[KingSora]

@FSDRE Thanks! Please open a separate issue for this, I'll take a look when I have time.

[laino]

Working like a charm on our end now.

Thanks!

[vgreddyrontala]

I got the same issue

the issue because of duplicate module reloading

[faheemfactor]

Remove NgModule imported in any submodule of the application.

I believe the Ionic Team needs to give more readable messages and tracing the source map better.

[yasserhennawi]

@KingSora I can confirm that npx ngcc works

You are the hero that we need, thanks you!

[bennyAngu]

can't resolve still . help to find , thanks in advance

[ahhxyz]

I get the same errors.

error detail: error postiion:

So I checked my NgModule imports:

and, change to : It solved my issue.

[phalla-doll]

I didn't use the scrollbar, but I got the same issue.

[jhuseinovic]

same, and my angular is 8.2.14

[Ahmed-Hafez]

I have the same issue and it happens when serving the initial project files. No new modules was added, No packages was installed. I did not know the source of the issue.

[FuadEsgerov]

@Ahmed-Hafez can you find any solution?

[Ahmed-Hafez]

@FuadEsgerov Unfortunately no, but a temporary solution can be made by uninstalling node modules and reinstalling them. If not solved, replacing the project files into another folder which might solve the issue temporarily. But as I told this is temporary solution and the issue almost will raise again after some time.

[johnjackson]

rm -rf node_modules npm install

[sri5099]

Good day!

Are you sure this is comming from the library itself? Can you give me the filename and number of the line in which this error is occurring?

its from lib.es5.d.ts line number 1340