The issue with export default

"Wait there's an issue with export default ?" - that was my reaction too

The issue with export default comes down with consistency and scalability. Almost everything is perfect when you build code to serve you and your tester, but when things grow, your team grows you need to ensure practices and patterns are built for scale.

One of the most important patterns for scale is modularization and componentization, the words popularised by React, Vue and the likes. The concept of decoupling and separation of concerns is extremely important in this quest for scale, anyway - after teaching and going through 1000's of pull requests in my career a common issue I'd notice is the lack of consistencies when export default is used to expose a component.

export default (obj) => _.reduce(obj, (accum, val, key) => {
    if (!key) return accum;
    accum[key] = val;
    return accum;
}, {}) 

Here we've got a simple function that rids an object of any empty/null values. For the sake of this blog, we have this in a helpers folder and call it cleanObject.helpers.js

All is dandy, except for when you start seeing people import this one helper in all sorts of ways across the project

// One file
import cleanObject from '@/helpers/cleanObject.helpers'
// Another file
import ObjectCleaner from '@/helpers/cleanObject.helpers'
// One more
import NullChecker from '@/helpers/cleanObject.helpers'

Sure you can expect people to put it quite literal to the name of the file, however that happens not as often as expected.

Well whats the magical hyped up fix for all of this ?

Easy, just stop export defaulting, go with export const, because now that you've got named functions you're exporting, the importer is constrained to the naming convention defined by the author, which maintains consistency.

Or another way to do it, is to export the function in a hashmap/object

// ... code
export default { cleanObject: <name of function above> }

There you go, a nice and easy fix to making your code patterns more consistent 💪

---

Follow me on LinkedIn || Twitter, heaps more articles to come

If you've got a topic you'd like me to write on - tweet me 😀

Also, I'd always love feedback on this and if it was helpful in the comments 👇

Comments

[Eugene Karataev]

1. Stop using export default.
2. Other team members import your module as following

import { cleanObject as NullChecker } from "@/helpers/cleanObject.helpers";

🤔

[Atanas Atanasov]

This comment made me giggle :D

[Vaibhav Namburi]

Can't win em all!

Can block that with linter checks though 🚀