Simplebar: Warning: Entry point simplebar-angular contains deep imports

[axmad22]

Describe the bug
Tried simplebar and then tried the angular version with Angular version 10 but both give the following warnings in compile build output

Warning: Entry point 'simplebar-angular' contains deep imports into '../node_modules/simplebar/dist/simplebar-core.esm'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

followed with more warning of this type in command and browser console

WARNING in ..\ode_modules\simplebar\dist\simplebar-core.esm.js depends on core-js/modules/es.array.filter. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies.

Expected behavior
to not see any warnings

Additional context
tried adding in the angular.json this snippet but did not work

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
     "allowedCommonJsDependencies": [
        "simplebar",
        "simplebar-angular",
     ]
     ...

so I also added this ngcc.config.js with the following code but nothing still lots of warnings

module.exports = {
  packages: {
    'simplebar-angular':  {
      ignorableDeepImportMatchers: [
        /simplebar\//
      ]
    },
  }
};

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| SimpleBar | "simplebar-angular": "^2.2.1",
| Browser | chrome latest
| npm/Yarn | Yarn latest
| Operating System | win7

[SvenBudak]

I also hope for a fix of this :)

[Grsmto]

I think these 2 warnings are 2 separate issues:

• The first one I think I know how to solve it, it's not trivial but I need to split the core package in two different packages...But tbh I'm not even sure.
• Second one however I have no clue why Angular is saying these are CommonJS/AMD dependencies...these core-js imports are ES modules :/ Is that the full warning you pasted here?

Anyway I'm not using Angular and I'm not prominent with it. So if someone seeing this wants to give this a shot and provide a PR I would merge immediately. These are probably fairly easy issues if you know Angular environment enough (just prob some build configuration to setup).

[axmad22]

I have tried the standalone and the simplebar-angular version they both produce the same warnings in command and browser console I have listed the full output bellow. Everything worked prior to updating to angular version 10, I tried setting different configs but nothing another package I was using (ngx-toastr) was giving same warnings until they updated a dependence (semantic-release) to latest version now its working fine

Warning: Entry point 'simplebar-angular' contains deep imports into '../node_modules/simplebar/dist/simplebar-core.esm'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

WARNING in ..\node_modules\simplebar\dist\simplebar-core.esm.js depends on core-js/modules/es.array.filter. CommonJS or AMD dependencies can cause optimization bail
outs.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in  ..\node_modules\simplebar\dist\simplebar-core.esm.js depends on core-js/modules/es.string.replace. CommonJS or AMD dependencies can cause optimization ba
ilouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in  ..\node_modules\simplebar\dist\simplebar-core.esm.js depends on core-js/modules/es.string.match. CommonJS or AMD dependencies can cause optimization bail
outs.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in  ..\node_modules\simplebar\dist\simplebar-core.esm.js depends on core-js/modules/es.regexp.exec. CommonJS or AMD dependencies can cause optimization bailo
uts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in  ..\node_modules\simplebar\dist\simplebar-core.esm.js depends on core-js/modules/es.function.name. CommonJS or AMD dependencies can cause optimization bai
louts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in  ..\node_modules\simplebar\dist\simplebar-core.esm.js depends on core-js/modules/es.array.reduce. CommonJS or AMD dependencies can cause optimization bail
outs.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in  ..\node_modules\simplebar\dist\simplebar-core.esm.js depends on core-js/modules/es.weak-map. CommonJS or AMD dependencies can cause optimization bailouts
.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in  ..\node_modules\simplebar\dist\simplebar-core.esm.js depends on core-js/modules/web.dom-collections.iterator. CommonJS or AMD dependencies can cause opti
mization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in  ..\node_modules\simplebar\dist\simplebar-core.esm.js depends on core-js/modules/es.string.iterator. CommonJS or AMD dependencies can cause optimization b
ailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in  ..\node_modules\simplebar\dist\simplebar-core.esm.js depends on core-js/modules/es.parse-int. CommonJS or AMD dependencies can cause optimization bailout
s.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in  ..\node_modules\simplebar\dist\simplebar-core.esm.js depends on core-js/modules/es.object.to-string. CommonJS or AMD dependencies can cause optimization
bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in  ..\node_modules\simplebar\dist\simplebar-core.esm.js depends on core-js/modules/es.object.assign. CommonJS or AMD dependencies can cause optimization bai
louts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in  ..\node_modules\simplebar\dist\simplebar-core.esm.js depends on core-js/modules/es.array.iterator. CommonJS or AMD dependencies can cause optimization ba
ilouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in  ..\node_modules\simplebar\dist\simplebar-core.esm.js depends on core-js/modules/es.array.for-each. CommonJS or AMD dependencies can cause optimization ba
ilouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

[Ortega-Dan]

My log is this:
Angular 9:
Warning: Entry point 'simplebar-angular' contains deep imports into '/home/user/someDirectory/theAngularProject/node_modules/simplebar/dist/simplebar-core.esm'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

[matadorhernan]

The console logs two Warnings, the first one is logged before compilation and it is a deep import problem which needs to have a ngcc config file to ignore said deep import matching "simplebar" . The second is just a commonjs issue, you can ignore those using the angular.json file

To fix the deep import
```javascript

 ngcc.config.js file node_modules/simplebar-angular/ngcc.config.js

 module.exports = {

     ignorableDeepImportMatchers: [/simplebar\//]

 };

```

To configure commonjs dependencies
```javascript

 angular.json file /project-name/angular.json

 ...

      "allowedCommonJsDependencies": ["core-js"]`

 ...

```

[hakimio]

The deep import is fixed in simplebar-angular version 3.

[Grsmto]

Hey guys,
Yeah I actually tried to fix this in the latest beta version, you can try [email protected] as @hakimio suggested and let me know if it works fine for you!

[hakimio]

@Grsmto it's not on npm. The latest versions of both simplebar and simplebar-angular are not on npm.

[Grsmto]

@hakimio not sure what happened but it should be published now! Thanks for letting me know.

[hakimio]

@Grsmto you've published the wrong folder.

[Grsmto]

Damn yeah Angular has a quite special way to handle this...Should be fine now.

[hakimio]

@Grsmto some issues with the beta version:

• simplebar-angular is using Options interface from simplebar library, but simplebar is not a dependency of simplebar-angular. Might be a good idea to move the interface to simplebar-core.
• TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
• Why does simplebar-core still depend on core-js? This causes warnings in Angular and I don't think you should be forcing people to use polyfill library. Those who need it should install it themselves. Also, might be a good idea to consider, whether you really need @babel/runtime and can-use-dom as dependencies.

[matadorhernan]

@Grsmto some issues with the beta version:

• simplebar-angular is using Options interface from simplebar library, but simplebar is not a dependency of simplebar-angular. Might be a good idea to move the interface to simplebar-core.
• TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
• Why does simplebar-core still depend on core-js? This causes warnings in Angular and I don't think you should be forcing people to use polyfill library. Those who need it should install it themselves. Also, might be a good idea to consider, whether you really need @babel/runtime and can-use-dom as dependencies.

Right core-js should be removed from dependecies to avoid commonjs issues

[Grsmto]

Thanks for the suggestions!

Why does simplebar-core still depend on core-js? This causes warnings in Angular and I don't think you should be forcing people to use polyfill library. Those who need it should install it themselves. Also, might be a good idea to consider, whether you really need @babel/runtime and can-use-dom as dependencies.

You have to transpile the code down to ES5 for it to be supported on every browsers we claim to support.
You can't leave this responsibility to the users because bundlers do not transpile node-modules. So if there is something not transpiled properly in one of your dependency, your app will break, let's say, on IE11, and you will have no idea where it comes from.
This is handled by babel-preset-env based on our browserlist configuration. Same thing for @babel/runtime.
For can-use-dom, yeah we really need to check if we can use the DOM otherwise the library would break on server-side rendering.

However this doesn't tell me why Angular is complaining about core-js, I believe that's a false positive (because the warning says it's commonjs/AMD but no, these are ES modules imports...) but maybe I'm wrong.

[hakimio]

You have to transpile the code down to ES5 for it to be supported on every browsers we claim to support.
You can't leave this responsibility to the users because bundlers do not transpile node-modules. So if there is something not transpiled properly in one of your dependency, your app will break, let's say, on IE11, and you will have no idea where it comes from.

This is already done automatically by Angular CLI based on your browserlist config. No other Angular library bundles core-js and @babel/runtime.

For can-use-dom, yeah we really need to check if we can use the DOM otherwise the library would break on server-side rendering.

This library can be replaced with a single typeof window !== undefined.

[Grsmto]

This is already done automatically by Angular CLI based on your browserlist config. No other Angular library bundles core-js and @babel/runtime.

Right. But simplebar-angular doesn't have core-js or babel-runtime as dependency, it's simplebar-core that does.
Anyway, I tested the latest beta release and I don't get any warning from Angular CLI, so it should be fine.

This library can be replaced with a single typeof window !== undefined.

Yeah that's pretty much what it does. So it's not a problem (it's the same check as React does, for example)

I released [email protected] that hopefully should solve the things you guys pointed in this issue.