Package/ESM compatibility linter (completed 💚)

[fregante]

It's easy to publish a package, but does it work? Is it compatible? I'm looking for a tool that verifies:

• can it be imported by node/webpack/parcel/rollup/typescript successfully?

With Node's ESM resolution introducing new constraints for ESM modules (type: 'module'), a lot of existing modules probably can't be imported successfully by it.

Edit: a GHA workflow would be useful, but currently you'd have to copy-paste the whole thing between repos.

Example config: https://github.com/fregante/webext-options-sync/blob/master/.github/workflows/esm-lint.yml
Example run: https://github.com/fregante/webext-options-sync/runs/388845886

I think it can be repackaged as module with https://github.com/SamVerschueren/listr so that failures can be caught and ignored

[Richienb]

Thanks for requesting! I've started development on a module to do this. https://github.com/Richienb/esm-lint

[fregante]

@Richienb sounds great! Keep in mind that most build tools (and node) depend on the package.json, so import 'module' will behave differently from import './file.js', which appears what esm-lint does now.

In my example, I made sure to use:

• npm pack to test the final published package, since some files might not be included
• npm install ./package so that you can use import 'module'

[fregante]

I successfully used my workflow in 2 packages:

fregante/webext-options-sync#49
vadimdemedes/dom-chef#67

It's not always easy to apply it, but if you want to use it in your projects:

1. copy-paste this file into your project: https://github.com/fregante/webext-options-sync/blob/master/.github/workflows/esm-lint.yml
2. preserve its header comment for reference or point it to this issue
3. replace every reference of webext-options-sync with your module name
4. good luck. It might very well fail under "TypeScript", so you can drop that section

[fregante]

✅

With ghat this is now easy as pie, without giving up GitHub Actions’ UI. Install the workflow with:

npx ghat fregante/ghatemplates/esm-lint --exclude jobs.TypeScript

Notice the optional --exclude if your project doesn't use TypeScript.

More info:

• https://github.com/fregante/ghat
• https://github.com/fregante/ghatemplates#esm-lint

[fregante]

Someone is working on an actual tool 🙂 https://twitter.com/_developit/status/1443988884782784514?s=20