ESLint flat config with EcmaScript modules (mjs) in an NX workspace
The release of ESLint v9 provides an improved way to configure ESLint using the flat config format. Since its release in April 2024 many projects have adopted this new format, including the two important ones for Angular developers being typescript-eslint and Angular ESLint.
Check out the ESLint migrator or NX Migrator to help you migrate your project to the new flat config format. Sadly, these tools migrate the current config to the flat compat format as a bridge between the old and new formats, not the new flat format itself.
While NX also supports the flat config format, there is a small caveat when using EcmaScript modules (*.mjs) in an NX workspace.
For now the NX linter doesn't recognize the .mjs extension (see code), meaning that you can't use the flat config format with EcmaScript modules out of the box.
A workaround I found in the typescript-eslint codebase is to use a CommonJS file to load the flat config from an EcmaScript module.
You can see the full migration to the flat config format in Angular Testing Library in this commit.
Feel free to update this blog post on GitHub, thanks in advance!
Join My Newsletter (WIP)
Join my weekly newsletter to receive my latest blog posts and bits, directly in your inbox.
Support me
I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.
