Dr. Derek Austin 🥳
2 min readDec 30, 2022

--

Thanks so much for your thoughtful response, Gregory. I agree that readers will enjoy your discussion. I've worked on large, multideveloper projects and still prefer default exports.

The biggest advantages of default exports are being able to find the component file by searching for it, being able to Ctrl+click (or Cmd+click on Mac) the component and end up in the right place (not index.ts), and having a consistent standard.

I do agree that 100% named exports is also a consistent standard, but I haven't found your other issues in my work.

1) You can refactor to a default export with a 2nd click. I've refactored large projects with VS Code without a problem. You're absolutely right that it's a little annoying.
2) I disagree index.ts files are necessary in any serious project. You can export @/Menu/Menu and @/Menu/MenuItem separately using default exports. And I never use that awkward {} syntax; I always write export default function.
3) Sure, you can use index.ts to avoid circular import warnings in certain cases. You could also avoid circular types in your API specification or ignore the circular import warnings in certain cases.
4) I don't use Styled Components; I use Tailwind CSS exclusively. And allowing custom CSS in edge cases is a maintenence nightmare, so I always put edge cases as variants in the props. (For example size="h-6 w-6" | "h-12 w-12".) But I think it's fine to export consts from a component file as named when necessary; it's the component I want as the default export.
5) I actually haven't found much difference between ESLint with either default or named exports. There is a rule to prefer default exports, though.

Thanks again for sharing your thoughts.

--

--

Dr. Derek Austin 🥳
Dr. Derek Austin 🥳

Written by Dr. Derek Austin 🥳

Hi, I'm Doctor Derek! I've been a professional web developer since 2005, and I love writing about programming with JavaScript, TypeScript, React, Next.js & Git.

No responses yet