ESM Support

[frencojobs]

Now that most of the libraries are already in ESM, I think it's time Feathers also release an ESM build. It should be pretty easy just to change the module from commonjs to ES2020 a few other changes mentioned in https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c.

https://github.com/feathersjs/feathers/blob/e013f98315d550ced6eacffd615c61bb0912b4ba/tsconfig.json#L5

The advantage is then I could just do

import { Forbidden } from '@feathersjs/errors'

instead of

import errors from '@feathersjs/errors'
const { Forbidden } = errors;

[daffl]

Is this available without a flag in all currently supported NodeJS versions? I was thinking of adding it as another build but if that is the case I'd much rather make it the default that's published.

[frencojobs]

Yep, Node 10 which doesn't support ESM was already dropped as end-of-life. So, the answer is yes.

But, not by default, users have to opt in via "type": "module" flag in package.json.

[frencojobs]

without a flag

Sorry, I glossed over this part. So the answer is no I guess. So adding it as another build might be better for now. But you can configure package.json to contain both CommonJS and ESM modules. You might want to use a tool like Rollup or Webpack for that.

[joezappie]

I'd find this very useful too. Starting a new app but don't want to use typescript for it. I would like to use import/export though so it would be nice to be able to generate the app as an esm project.

[daffl]

This will be the default in v5 and the new CLI currently under development in https://github.com/feathersjs/feathers/pull/2425

[joezappie]

Awesome! Thanks for the info

[steffanhalv]

@daffl Can you please add feathers.esm.js to dist folder on build? https://unpkg.com/browse/@feathersjs/[email protected]/dist/

Then we can import feathers client using es modules from CDN. Ex.

<script type="module">
  import feathers from 'https://unpkg.com/@feathersjs/[email protected]/dist/feathers.esm.js'
  const app = feathers()
</script>

Workaround

Currently the index.js file is of type UMD and can be loaded using this workaround:

./umdloader.js

export default async (url, module = {exports:{}}) =>
  (Function('module', 'exports', await (await fetch(url)).text()).call(module, module, module.exports), module).exports

./index.html

<script type="module">
  import loadUMD from './umdloader.js'
  loadUMD('https://unpkg.com/@feathersjs/[email protected]/dist/feathers.esm.js').then(feathers => {
    const app = feathers()
  })
</script>

Ref. https://stackoverflow.com/a/64721256/2298745

[vixalien]

I also believe you should add an exports field to the package.json to differentiate the different build assets (browser, esm, cjs etc). I believe

[daffl]

We have been trying to do this in https://github.com/feathersjs/feathers/pull/2665 for the Feathers core packages but so far have not gotten it to work.

[steffanhalv]

Looks like it is @feathersjs/[email protected] which are causing the problem:

> @feathersjs/[email protected] compile:esm
> shx rm -rf esm/ && tsc --target es2020 --module es2020 --outDir esm/ --moduleResolution node

> @feathersjs/[email protected] prepublish /home/runner/work/feathers/feathers/packages/socketio-client
> npm run compile

lerna ERR! lifecycle "prepublish" errored in "@feathersjs/socketio-client", exiting 2
npm ERR! code 2
npm ERR! path /home/runner/work/feathers/feathers
npm ERR! command failed
npm ERR! command sh -c lerna bootstrap

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/runner/.npm/_logs/2022-06-13T21_13_28_365Z-debug-0.log
Error: Process completed with exit code 2.