Casl: Can't import the named export 'nin' from non EcmaScript module

[Joeb3219]

Describe the bug
Get the following error:

ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5035-5036
Can't import the named export '$all' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5076-5077
Can't import the named export '$elemMatch' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:4983-4984
Can't import the named export '$eq' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5086-5087
Can't import the named export '$exists' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5008-5009
Can't import the named export '$gt' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5015-5016
Can't import the named export '$gte' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5021-5022
Can't import the named export '$in' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:4995-4996
Can't import the named export '$lt' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5002-5003
Can't import the named export '$lte' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:4989-4990
Can't import the named export '$ne' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5028-5029
Can't import the named export '$nin' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5063-5064
Can't import the named export '$options' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5052-5053
Can't import the named export '$regex' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5043-5044
Can't import the named export '$size' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@ucast/mongo/dist/es6m/index.mjs 1:955-956
Can't import the named export 'CompoundCondition' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@ucast/mongo/dist/es6m/index.mjs 1:910-911
Can't import the named export 'FieldCondition' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@ucast/mongo/dist/es6m/index.mjs 1:1223-1224
Can't import the named export 'FieldCondition' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@ucast/mongo/dist/es6m/index.mjs 1:2006-2007
Can't import the named export 'FieldCondition' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@ucast/mongo/dist/es6m/index.mjs 1:1203-1204
Can't import the named export 'ITSELF' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@ucast/js/dist/es6m/index.mjs 1:597-598
Can't import the named export 'ITSELF' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@ucast/js/dist/es6m/index.mjs 1:1566-1567
Can't import the named export 'ITSELF' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@ucast/js/dist/es6m/index.mjs 1:1867-1868
Can't import the named export 'ITSELF' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@ucast/mongo/dist/es6m/index.mjs 1:2054-2055
Can't import the named export 'NULL_CONDITION' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@ucast/mongo/dist/es6m/index.mjs 1:2306-2307
Can't import the named export 'ObjectQueryParser' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5145-5146
Can't import the named export 'all' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5187-5188
Can't import the named export 'and' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@ucast/mongo/dist/es6m/index.mjs 1:2427-2428
Can't import the named export 'buildAnd' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5207-5208
Can't import the named export 'createFactory' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5265-5266
Can't import the named export 'createFactory' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@ucast/js/dist/es6m/index.mjs 1:971-972
Can't import the named export 'createInterpreter' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5172-5173
Can't import the named export 'elemMatch' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5101-5102
Can't import the named export 'eq' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5181-5182
Can't import the named export 'exists' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5122-5123
Can't import the named export 'gt' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5128-5129
Can't import the named export 'gte' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5111-5112
Can't import the named export 'lt' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5117-5118
Can't import the named export 'lte' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5106-5107
Can't import the named export 'ne' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5139-5140
Can't import the named export 'nin' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@ucast/mongo/dist/es6m/index.mjs 1:625-626
Can't import the named export 'optimizedCompoundCondition' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5160-5161
Can't import the named export 'regex' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5152-5153
Can't import the named export 'size' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@casl/ability/dist/es6m/index.mjs 1:5133-5134
Can't import the named export 'within' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/@ucast/mongo/dist/es6m/index.mjs 1:169-238
Can't reexport the named export 'defaultInstructionParsers' from non EcmaScript module (only default export is available)

To Reproduce
Steps to reproduce the behavior:

1. Created a yarn monorepo w/ an angular project.
2. Using commonjs as my tsconfig module, es2015, dom, and es6 as my libs, es2015 as my target.
3. Compile app

I am not even trying to use the angular bindings -- when I do drop it into my module's imports, I get errors about Ivy compatibility/ngcc, even though I've run ngcc.

CASL Version
@casl/ability - 5.1.1

Environment:
TS 4.0.3, Node 12.13.0, Angular 11.0.2

[stalniy]

I’ve not tested casl with angular v11 but it seems to be a webpack related issue. Please read explanation in the docs - https://casl.js.org/v5/en/guide/install#webpack

[stalniy]

Related https://lifesaver.codes/answer/webpack-4-compatibility-issue

I’ll check why webpack picks wrong bundle for ucast module. Ucast actually have ES6.mjs file as well

[miltonhowe]

FWIW I am having the same issue with a fresh install of @casl/angular.
TS 4.0.5 Node v14.1.0 Angular 11.0.4
The error messages are followed by this (helpful?) suggestion:

 Error: node_modules/@casl/angular/dist/types/AbilityModule.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

    This likely means that the library (@casl/angular) which declares AbilityModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

[DerekJDev]

Any update on this?

[stalniy]

Sorry, nothing new guys. We are celebrating Orthodox Christmas. So, there won’t be any updates for the next 2-3 days for sure.

Meanwhile, you can check casl v5 + angular v10. It works for sure. Maybe it will help you to make it work for angular v11 as well.

Please pay attention at https://github.com/stalniy/casl-examples/blob/master/packages/angular-todo/webpack.extend.js#L6