Caveat

Avoid default export as it can lead to file being named something other than the component

• This will lead to file discovery issue when the project gets large
• e.g. index.js default exports NestedAdminPageRenderer.tsx which can be imported as AdminSubPage in another component

ESM Syntax

/* Export */
export default defaultExport
export namedExport

// default export/import
import defaultExport, { namedExport } from "export-file-path";

export default Component
import Component from "./component"

// export const declaration
export const Component
import { Component } from "./component"

// export object literal
export { Component }
import { Component } from "./component"

// importing as an alias
import { Original as AliasName } from "path-to-file";

Import/Export multiple variables

// export
export const MyFunction = () => {}
export const MyFunction2 = () => {}

const Var = 1;
const Var2 = 2;

// import
import {
  MyFunction1,
  MyFunction2,
  Var,
  Var2,
} from './path-to-file';

CJS (CommonJS)

/* Import */
const module = require("path-to-file");

/* Export */
// default export
module.exports = defaultNamed

// named export
module.exports.name = namedExport

// default read-only
exports = defaultReadonly

// named read-only
exports.name = namedReadonly