Does it export the whole file, the whole component and everything in his scope or ? ( I am confused since I see we have the same name file as the name of the function (react component) and we use the same casing. So which one is getting targeted? Thanks.

I'm looking for your thoughts on organizing exports. The problem that I'm having is that I have large const declarations that stretch like 5+ lines, and I want to know if the const is exported or not. Usually with export default function ... I can tell right away. I have toyed around with putting all exports at the top of the file, but nobody else seems to do that... I'm wondering how you would do it.

Lets say I have this example file:

import oscillate from "./oscillate.js";

export function enable() {
  document.querySelector("video").play();
}

export function disable() {
  document.querySelector("video").pause();
}

/**
 * Large doc comment
 */
// 👇 I want this exported as the default export
const toggle = oscillate(
  () => {
    console.log("From oscillate! Rising");
    enable();
  },
  () => {
    console.log("From oscillate! Falling");
    disable();
  }
);

// We actually use the toggle() function, so we can't leave it unnamed.
document.body.addEventListener("click", () => toggle())

Where should the export default statement go? I see three possibilities:

1: Put the export right after the variable declaration. This is pretty good, but the weakness is if the const declaration is long, it fails on both "is this variable exported?" and "what does this file export?"

const toggle = (
  // ...
  // ...
  // ...
);
// Either of these work. It's the same thing.
export { toggle as default };
export default toggle;

2: Put all the exports at the top. This makes it extremely easy to skim "what does this file export?", but much harder to answer "is this variable exported".

export { toggle as default, enable, disable };

function enable()...

function disable()...

// Already exported at the top!
const toggle = ...;

3: Put the export statement just before the declaration. This keeps the export and const declaration close right until you add a doc comment. In VS Code (and probably others) if you put the export after the doc comment but before the const declaration, it doesn't add it to the hover (it doesn't associate the comment with the const).

export function enable()...

export function disable()...

export { toggle as default };
/**
 * Large doc comment
 */
const toggle = ...;

The crux is that I can't export default const x = .... I'm looking for the next best thing. Since there doesn't seem to be a way to keep the const and the export default close together, I'm leaning towards option #2 to put it all at the top. There's just no way to really do it and keep the two close together. The doc comments are right above it, and the expression body itself pushes anything below it out of the vicinity.

Looking for other ideas and/or opinions. Maybe there's some JSDoc tag that I should use like @exported or something?

Can someone please shed more light on this statement from Axel Rauschmayer "Note that default-exporting objects is usually an anti-pattern (if you want to export the properties). You lose some ES6 module benefits (tree-shaking and faster access to imports)."

Link: https://medium.com/@rauschma/note-that-default-exporting-objects-is-usually-an-anti-pattern-if-you-want-to-export-the-cf674423ac38#.nibatprx3

Trying to understand when to use which one? Do you define any listing rules imposing one over the other ?

Here's what I mean:

export const MyFunction () => {}

and:

export default MyFunction

Is there any difference between the two in terms of recommended preference, or performance or anything? I honestly would prefer using the export in front of the function myself, but I'll go with whatever is the best practice.

This starts as a post about "export default", but it's a more general discussion about codebase consistency, cognitive overhead, ability to reason about and refactor a big codebase.

https://humanwhocodes.com/blog/2019/01/stop-using-default-exports-javascript-module/

Regardless what you think about "export default", it's a great blog post that highlights many interesting points.

What syntax is usually preferred?

export const a = () => {}
export const b = () => {}
export const c = () => {}

or

const a = () => {}
const b = () => {}
const c = () => {}

export default { a, b, c }

When creating modules in react like other components, functions e.t.c, what is the better way of exporting your modules?? Trying to settle a debate

The vast majority of React projects I've seen declare and export components as follows:

const Timer = (props) => {
  // component code here
}

export default Timer;

Even newly created default React project uses this in App.jsx file.

On one of the project I worked on it was prohibited to use default exports even for components. So we had:

export const Timer = (props) => {
  // code 
}

// and then import 
import { Timer } from './components/Timer"

The guy who created the style guide for the project believed that default exports are bad. But importing Timer from Timer is so stupid, isn't it? And it was not the only project I've seen using this kind of exporting components.

But my question is why I almost never see anyone using this:

export default function Timer(props) {
  // code
}

In my opinion it's much better than 2 previous options. It's short. It's clear. Maybe there are some cons I don't see?

I'm too lazy and i dont want to set up babel every time i do something in my code editor.

Whats a good reason to chose `export default` vs `module.exports`