ECMAScript module support / NextJS support

[jd1900]

I'm trying to use it in a NextJS project.

First, to avoid the "Module not found: Can't resolve 'fs'" in a Next.js application I added this:

module.exports = {
  webpack5: true,
  webpack: (config) => {
    config.resolve.fallback = { fs: false };

    return config;
  },
};

However, when I try to load, as the loadBuffer is not available anymore, I can't.

For example:

      const emptyImageBuffer = Buffer.from([
        0x52, 0x49, 0x46, 0x46,   0x24, 0x00, 0x00, 0x00,   0x57, 0x45, 0x42, 0x50,   0x56, 0x50, 0x38, 0x20,
        0x18, 0x00, 0x00, 0x00,   0x30, 0x01, 0x00, 0x9d,   0x01, 0x2a, 0x01, 0x00,   0x01, 0x00, 0x02, 0x00,
        0x34, 0x25, 0xa4, 0x00,   0x03, 0x70, 0x00, 0xfe,   0xfb, 0xfd, 0x50, 0x00
      ]);
      await img.load(emptyImageBuffer);

Raises this error:

Unhandled Runtime Error
Error: Running inside a browser; filesystem support is not available

It would be great to add ECMAScript module support.

[ApeironTsuka]

Sorry about that. Just pushed an update that should fix the filesystem error when passing in a buffer. If it works, I'll push it to npm proper.

As for NextJS... the browser detection is fairly primitive - the only reliable way I could find was simply checking if the global variable 'window' is defined, and assuming a browser if so. Hardly fool-proof, as your NextJS issue proves, since it only tries to resolve 'fs' if it detects a browser. I'm open to suggestions on better detection for this.

[jd1900]

Thank you! I'll try to test it and let you know.

[jd1900]

I'm unable to test it as the version is still not the new one.

I've tried directly applying the patch on webp.js but I couldn't manage to use the new version, as the built version didn't change.

[jd1900]

@ApeironTsuka Could you push to npm?

[ApeironTsuka]

Sorry - it's pushed now. Been a bit sick this week.

[jd1900]

It works now, thank you!