As hard as I fucking try, my stumbling block, every fucking time is exports/imports. I can't wrap my head around them, at all.

What do you use in browser vs in node?
Whats the *most commonly used standard*?

Whats the difference between "modules.export = Foo;"
vs "exports.Foo = Foo;"

what about

export class Foo? Is that the same as modules.export or export.Foo?

Look at this shit...
import FooComponent from "./Foo";
export default Foo
const Foo = require("./foo")
const Foo = require("./foo.js").Foo
import { Foo } from "./Foo.js";

And probably a dozen others I don't know about.

Why does there have to be so many fucking ways to do a fucking import/export?

What the fuck is going on here?

An import is simply as if the file you're importing is physically where the import statement is. An export is just marking something as exportable.

It simple really. And I think I'm in mood for explaining it.

Looking at ECMAScript imports/exports, there's two types of exports: default export and named exports.

There can be only one default export in a module and it doesn't have a name. Default export is done by exporting unnamed expression with `export default`. For example exporting anonymous function as a default export is done like this: `export default function (...args) { ... }`. At import it's required to specify identifier that default export is referred as, basically naming it, like this: `import func from 'module'`.

And then there's named exports. Those are all the other exports that have a name, exported with `export` keyword. For example `export let variable = 'value'`. Importing is done again with `import` keyword, but instead of specifying one identifier we specify a map of identifiers with a construct similar to object deconstuction assignment. For example `import { variable } from 'module'`.

You can also import default and named exports at the same time, rename exports or import all.

With CommonJS the story is different. exports is the same as module.exports and it's literally the value that is exported from the module and returned at the call of the require function.

@Wisecrack, I encourage you to check out Full Stack Open 2020 MOOC by the University of Helsinki. It's a good one - and a lot of work if you decide to actually do that, but if you just read it, some concepts are very well explained there. If I remember correctly, import/exports in Node.js (aka CommonJS way of doing things) is explained in module 3a. In the client side code ECMAScript way is more prevalent, and I think that's explained somewhere there as well.

@wisecrack touché, I agree whole heartedly. Why do folk keep coming up with 1001 ways to do the same shit? It's basically more ways to cause confusion between dev's and cause a FU!

Basically what you got is a war between ES6 and CommonJS.

This is how I understand it...
- node uses require
- react uses import
It's to do with static/dynamic loading so react can get rid of unneeded imports.

"module.exports" and "exports" are almost the same apart from when assigning a function. It screws it up for some reason. Just stick to "module.exports" and you'll be fine.

"export default class Arse" means you can use "import AnyNameIWant from ..." but "export Butt" without 'default' means you have to use same name when importing and you have to use curly brackets -> "import { Butt } from ...."

"import Arse from './Butt'.TP", all you're doing is referencing TP in Butt.

@100110111 so node uses commonjs.

I take it that means browsers use amd?

And AMD uses requirejs or something right?

I haven't yet seen an answer to which uses what.

Every time I've ever asked I just got the following:

"which do I use on browser vs. node"

answer: "yes."

@TedTrippin

Node uses require. I thought it used commonjs?

Also I assume when you talk about react you're talking about browser-side react and not all the fuckery that goes on in node.

Ah yes, the good old import export fuckery...
Couple it with some custom paths in tsconfig.json and webpack and you got youself a nice shitcake to devour for a whole day.

@PonySlaystation Sometimes if you don't fiddle with tsconfig.json, you end up with imports starting with './../../../../../'