named-default-export.js

// Named import
// ex. importing a single named export
import { MyComponent } from "./MyComponent";
// ex. importing multiple named exports
import { MyComponent, MyComponent2 } from "./MyComponent";
// ex. giving a named import a different name by using "as":
import { MyComponent2 as MyNewComponent } from "./MyComponent";

// exports from ./MyComponent.js file
export const MyComponent = () => {}
export const MyComponent2 = () => {}

import * as MainComponents from "./MyComponent";
// use MainComponents.MyComponent and MainComponents.MyComponent2

// Default import
import MyDefaultComponent from "./MyDefaultExport";
// export
const MyComponent = () => {}
export default MyComponent;
// The naming of import is completely independent
.
.
.
// Another example - this works
import {bar} from './foo';
bar();
// foo.js
module.exports = {
 bar() {}
}

// And this works:
import foo from './foo';
foo.bar();
// foo.js
export default {
 bar() {}
}

// So why doesn't this work?
import {bar} from './foo';
bar();

// When you have
export default {
  bar() {}
}
// The actual object exported is of the following form:
exports: {
  default: {
    bar() {}
  }
}
// When you do a simple import (e.g., import foo from './foo';) you are actually getting the default object inside the import (i.e., exports.default)