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

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

[danmana]

This worked for me:

{
  "scripts": {
    "postinstall": "npm run fix.casl.esm && npm run fix.ucast.mongo2js.esm && npm run fix.ucast.mongo.esm && npm run fix.ucast.js.esm",
    "prefix.casl.esm": "npx shx cp ./node_modules/@casl/ability/dist/es6m/index.mjs ./node_modules/@casl/ability/dist/es6m/index.js",
    "fix.casl.esm": "npx shx sed -i 's/index.mjs/index.js/g' ./node_modules/@casl/ability/package.json",
    "prefix.ucast.mongo2js.esm": "npx shx cp ./node_modules/@ucast/mongo2js/dist/es6m/index.mjs ./node_modules/@ucast/mongo2js/dist/es6m/index.js",
    "fix.ucast.mongo2js.esm": "npx shx sed -i 's/index.mjs/index.js/g' ./node_modules/@ucast/mongo2js/package.json",
    "prefix.ucast.mongo.esm": "npx shx cp ./node_modules/@ucast/mongo/dist/es6m/index.mjs ./node_modules/@ucast/mongo/dist/es6m/index.js",
    "fix.ucast.mongo.esm": "npx shx sed -i 's/index.mjs/index.js/g' ./node_modules/@ucast/mongo/package.json",
    "prefix.ucast.js.esm": "npx shx cp ./node_modules/@ucast/js/dist/es6m/index.mjs ./node_modules/@ucast/js/dist/es6m/index.js",
    "fix.ucast.js.esm": "npx shx sed -i 's/index.mjs/index.js/g' ./node_modules/@ucast/js/package.json"
  }
}

This worked for me too, but I had to replace the single quotes with escaped double quotes (on windows).

{
  "scripts": {
    "postinstall": "npm run fix.casl.esm && npm run fix.ucast.mongo2js.esm && npm run fix.ucast.mongo.esm && npm run fix.ucast.js.esm",
    "prefix.casl.esm": "npx shx cp ./node_modules/@casl/ability/dist/es6m/index.mjs ./node_modules/@casl/ability/dist/es6m/index.js",
    "fix.casl.esm": "npx shx sed -i \"s/index.mjs/index.js/g\" ./node_modules/@casl/ability/package.json",
    "prefix.ucast.mongo2js.esm": "npx shx cp ./node_modules/@ucast/mongo2js/dist/es6m/index.mjs ./node_modules/@ucast/mongo2js/dist/es6m/index.js",
    "fix.ucast.mongo2js.esm": "npx shx sed -i \"s/index.mjs/index.js/g\" ./node_modules/@ucast/mongo2js/package.json",
    "prefix.ucast.mongo.esm": "npx shx cp ./node_modules/@ucast/mongo/dist/es6m/index.mjs ./node_modules/@ucast/mongo/dist/es6m/index.js",
    "fix.ucast.mongo.esm": "npx shx sed -i \"s/index.mjs/index.js/g\" ./node_modules/@ucast/mongo/package.json",
    "prefix.ucast.js.esm": "npx shx cp ./node_modules/@ucast/js/dist/es6m/index.mjs ./node_modules/@ucast/js/dist/es6m/index.js",
    "fix.ucast.js.esm": "npx shx sed -i \"s/index.mjs/index.js/g\" ./node_modules/@ucast/js/package.json"
  }
}

@paolosanchi Thanks a lot! This solution works both in dev mode and prod mode. The webpack-config trick with javascript/auto did not work when running --prod.

---

EDIT: for those that don’t want to add a dependency on shx

I ended up writing a small script to do the patching:

Create a file fix-casl-mjs-webpack-issues.js

/**
 * This file patches mjs modules for @casl to simple js files.
 * mjs modules do not work well with webpack 4.
 * 
 * see https://github.com/stalniy/casl/issues/427#issuecomment-757539486
 * Note: the first suggestion with webpack config only works in dev mode, not with --prod
 * 
 * This file does what the last solution with shx does,
 * but without an extra shx library and without adding a lot of script lines to package.json
 * 
 */

console.log(`
\n============================================================
Patching @casl libs to work with webpack 4
see https://github.com/stalniy/casl/issues/427#issuecomment-757539486
`);

const fs = require('fs');
const libsToPatch = ['@casl/ability', '@ucast/mongo2js', '@ucast/mongo', '@ucast/js'];
for (let lib of libsToPatch) {
  console.log(`Patching mjs for ${lib}:`);
  const mjsIndexPath = `./node_modules/${lib}/dist/es6m/index.mjs`;
  const jsIndexPath = `./node_modules/${lib}/dist/es6m/index.js`;
  const packageJsonPath = `./node_modules/${lib}/package.json`;

  // copy index.mjs to index.js
  console.log(`  - copy index.mjs to index.js`);
  fs.copyFileSync(mjsIndexPath, jsIndexPath);

  // replace index.mjs with index.js in the libs package.json
  console.log(`  - replace index.mjs with index.js in package.json`);
  let contents = fs.readFileSync(packageJsonPath, 'utf8');
  contents = contents.replace(/index\.mjs/g, 'index.js');
  fs.writeFileSync(packageJsonPath, contents, { encoding: 'utf8' });
}

console.log('============================================================\n');

in package.json

{
  "postinstall": "node fix-casl-mjs-webpack-issues.js"
}

[stalniy]

The latest release of @casl/angular fixes ngcc related issue.

Regarding ESM modules: I found this issue regarding angular cli and some additional context. The issue is that when webpack imports dependencies inside .mjs files, webpack checks only main and browser fields in package.json. main is usually points to commonjs and browser I think usually points to some global vars. So, there is no reliable way to fix this for webpack4.

So, I suggest to use one of this ways:

1. customize angular webpack file and make .mjs files to be of type javascript/auto as in example repo. As a downside, your bundle size will be a bit bigger
2. customize resolve.mainFields and exclude es2015 out of it, so webpack won’t bundle .mjs file at all (use module property which is a ES5 +ESM). As a downside, you can deliver a modern build for users
3. use the previous version of casl and wait for angular cli to support webpack 5 which supports exports field in package.json and properly handles chains of ESM imports
4. use postinstall hook and shx to rename .mjs to .js while angular cli uses webpack 4. In your app package.json:

{
  "scripts": {
    "postinstall": "npm run fix.casl.esm",
    "prefix.casl.esm": "npx shx cp ./node_modules/@casl/ability/dist/es6m/index.mjs ./node_modules/@casl/ability/dist/es6m/index.js",
    "fix.casl.esm": "npx shx sed -i 's/index.mjs/index.js/g' ./node_modules/@casl/ability/package.json"
  }
}