.mjs extension invalid for Angular/Typescript

[tomardern]

Hi,

I've been attempting to use this package, but as the files are .mjs, angular/typescript are unable to use them, we get the following errors:

  >> ERROR in src/app/shared/services/until-idle.service.ts(2,36): error TS2307: Cannot find module 'idlize/defineIdleProperty.mjs'.
    >> src/app/shared/services/until-idle.service.ts(3,38): error TS2307: Cannot find module 'idlize/defineIdleProperties.mjs'.
    >> src/app/shared/services/until-idle.service.ts(4,26): error TS2307: Cannot find module 'idlize/idle-callback-polyfills.mjs'.
    >> src/app/shared/services/until-idle.service.ts(5,27): error TS2307: Cannot find module 'idlize/IdleQueue.mjs'.

We are using Angular 6 (Typescript).

Please can this package be converted to use .js rather than using .mjs? You might need to provide both .mjs/.js as this package will be used in other projects?

Is there a reason why you didn't opt for the standard import {IdleQueue} from 'idlize' syntax?

Having said that, I'm looking forward to using this (and blogging about it) on the work we're doing to increase performance on our site. Great work.

Thanks,

[tomardern]

It's super hacky, but we run the following command to create the .js files required:

find ./node_modules/idlize -name '*.mjs' -exec sh -c 'cp \"$0\" \"${0%.mjs}.js\"' {} \\; && perl -pi -w -e 's/mjs/js/g;' ./node_modules/idlize/*.js

(Find all the .mjs files in the package, copy to .js then replace 'mjs' to 'js' in those files)

[lencioni]

Relevant TypeScript issue: microsoft/TypeScript#27957

[philipwalton]

Sorry for the late reply -- I received this when I was on vacation, and I'm just now seeing it.

It's unfortunate that TypeScript doesn't support .mjs (most tools already do), but I don't think the right solution is to change back to using .js. If everyone did that then TS (and all other tools for that matter) would have no incentive to change, and no progress would ever be made.

I think the best path forward is to let these tools know that they're not compatible with libraries you want to use, and if enough people do that then TS will surely add support.

Is there a reason why you didn't opt for the standard import {IdleQueue} from 'idlize' syntax?

This is actually non-standard syntax, it's node-specific syntax. To use ES modules in browsers you have to supply a full URL.

I'd take a look at this article if you haven't seen it already:
https://developers.google.com/web/fundamentals/primers/modules