the reason to use es module system insead of commonjs module system?

[zzzgit]

the reason to use es module system insead of commonjs module system?

[jimmywarting]

if we can get more ppl to switch to using es modules instead of commonjs then it would also make it possible for others developers to use more and more packages on the web & Deno environment too.
Loading a es module is done using async methodology instead of sync. That also means you can also load other modules from https and not just only from NPM that has a monopoly in where things are hosted.
commonjs is not a standardized. es module is and commonjs have flaws that make loading remote files impossible b/c it can't guess what you meant to import using require('./foo'), did you mean foo.ts, foo.js, foo/index.js, foo/index.ts
es module also have the benefit of using top level await which commonjs dose not have support for.

es module is becoming the de-facto way of writing new modules, all the nodejs doc is now starting to suggest ways of loading things with es modules instead of using commonjs

commonjs can also easily load es modules too, but it have to do so using async import() and since fetch is so async anyways then it would not make it such a big hassle to just simple wrap it in a dummy function if you are stuck with commonjs

i recently did use this solution to load node-fetch in a commonjs project that yet haven't switched to es modules yet.

const stuff = {
  fetch(...args) {
    await stuff.done
    return stuff.fetch(...args)
  }
  done: import('node-fetch').then(({ default: fetch, ...rest }) => {
    return Object.assign(stuff, { fetch }, rest)
  })
}

module.exports = stuff

it's just some few extra lines of codes to make it work in commonjs

const webapis = require('./stuff.js')
const { fetch } = webapis

fetch('https://httpbin.org/get').then(res => {
  // at this point stuff.fetch have been replaced with the default fetch fn
  // and all of the other exports from node-fetch is also available on webapis
  
  // now you can also use
  const { Response, Request, Headers, FormData, Blob, File, blobFrom, ...rest } = webapis
  return new Response(new Blob(['something else']))
})

// ofc you can also wait for node-fetch to have been loaded using
webapis.done.then(mod => {
  mod.fetch(...)
})