Add support to ES Modules

[Rigo-m]

What are you trying to achieve?

Use Sharp in a nuxt nitro environment

What would you expect the API to look like?

Sharp should export an .mjs file so that it can be used in environments that doesn't support .cjs

What alternatives have you considered?

None but any suggestion is welcomed

[lovell]

Do you know if the wrapper approach outlined in https://nodejs.org/api/packages.html#approach-1-use-an-es-module-wrapper will work with Nuxt Nitro?

[Rigo-m]

It should work, I think. Otherwise, you can use https://github.com/unjs/mlly to port sharp into ESM 😛

@pi0 any suggestions?

[pi0]

@Rigo-m Sharp can be imported inside Node.js ESM files and also working fine with Nuxt Nitro (the only limitation is you cannot deploy to Workers because of Node.js bindings). BTW you might like to use ipx which is based on Sharp but easier to integrate. Check this example: https://codesandbox.io/s/quirky-currying-3259v?file=/server/api/ipx.ts

@lovell While Node.js ESM can work with CJS libraries and bundlers like webpack/rollup allow mixed syntax (that's how nitro workers) it would be nice if Sharp also adds exports field. This can make support less hacky and more ESM native. If you want me can make a PR to improve packages' ESM support. Some of popular packages even considered being esm-only.

[lovell]

Thanks for confirming, a PR to add a thin ESM wrapper and suitable exports to allow dual-usage would be most welcome. If it's possible to add a unit test for the wrapper, that would be great too.

And thank you Pooya for all your work on Nuxt and the Vue ecosystem!

[pi0]

Hi @lovell. Just pinging to say still would love to contribute to this for ESM support! @danielroe is also an ESM expert who might help on this as well :)

[robinscholz]

@pi0 Do you happen to have an example with sharp and nuxt nitro somewhere? Running into problems, where sharp is a dependency of a package that is imported for a server side api in nuxt 3.

[pi0]

Usage is in sandbox comment above but official Nuxt3 integration is coming soon with Image module.

[shtse8]

looking forward to this support

[spartanz51]

import { createCommonJS } from 'mlly'
const { __dirname, __filename, require } = createCommonJS(import.meta.url)
import sharp from 'sharp'

[TimisRobert]

import { createCommonJS } from 'mlly'
const { __dirname, __filename, require } = createCommonJS(import.meta.url)
import sharp from 'sharp'

I'm trying to make it work with esbuild, but I always get __dirname is not defined :(