Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Vaibhav Namburi
Vaibhav Namburi

Posted on

     

The issue with export default

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

The issue withexport 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 mostimportant 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 whenexport default is used to expose a component.

exportdefault(obj)=>_.reduce(obj,(accum,val,key)=>{if(!key)returnaccum;accum[key]=val;returnaccum;},{})
Enter fullscreen modeExit fullscreen mode

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 itcleanObject.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 fileimportcleanObjectfrom'@/helpers/cleanObject.helpers'// Another fileimportObjectCleanerfrom'@/helpers/cleanObject.helpers'// One moreimportNullCheckerfrom'@/helpers/cleanObject.helpers'
Enter fullscreen modeExit fullscreen mode

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 withexport 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

// ... codeexportdefault{cleanObject:<nameoffunctionabove>}
Enter fullscreen modeExit fullscreen mode

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


Follow me onLinkedIn ||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 👇

Top comments(3)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
karataev profile image
Eugene Karataev
undefined is not a function
  • Location
    Russia, Novosibirsk
  • Joined
  1. Stop usingexport default.
  2. Other team members import your module as following
import{cleanObjectasNullChecker}from"@/helpers/cleanObject.helpers";
Enter fullscreen modeExit fullscreen mode

🤔

CollapseExpand
 
scriptex profile image
Atanas Atanasov
Senior JavaScript/TypeScript engineer with more than 10 years experience and a great love for detail.
  • Location
    Varna, Bulgaria
  • Education
    Master of Sales Management
  • Work
    Lead Frontend Developer
  • Joined

This comment made me giggle :D

CollapseExpand
 
veebuv profile image
Vaibhav Namburi
All things software & product, honestly - FrontEnd, BackEnd, DevOps, ML - as long as we're solving massive problems.My code is used by millions of users globally - Potatoes make me happy
  • Location
    Sydney
  • Education
    University of New South Wales
  • Work
    Tech Lead / Head of Tech at five2one
  • Joined

Can't win em all!

Can block that with linter checks though 🚀

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

All things software & product, honestly - FrontEnd, BackEnd, DevOps, ML - as long as we're solving massive problems.My code is used by millions of users globally - Potatoes make me happy
  • Location
    Sydney
  • Education
    University of New South Wales
  • Work
    Tech Lead / Head of Tech at five2one
  • Joined

More fromVaibhav Namburi

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp