woltapp / blurhash

A very compact representation of a placeholder for an image.
https://blurha.sh
MIT License
15.65k stars 353 forks source link

ES module import issue #202

Closed andyzaharia closed 1 year ago

andyzaharia commented 2 years ago

Hi guys, newbie JS developer here.

I've been using this framework in a nodejs app for quite a while and decided to update the server to use ES modules. All went great with all the dependencies that I had in the project but when I got to import the encode func, nodejs complains about the package being a CommonJS module, even thou... I don't think thats true.

import { encode } from "blurhash"; - this ends up with a SyntaxError: Named export 'encode' not found. The requested module 'blurhash' is a CommonJS module... erorr

and if I do this:

import blurhash from "blurhash"; - I end up with a SyntaxError: Unexpected token 'export' error.

Does anyone have any idea what this happens?

Thanks a lot and sorry of this is a stupid question.

Later edit: This problems seems to be happening only with the 2.0.0 version, the 1.1.5 works fine.

syuilo commented 1 year ago

I have the exact same issue. I have tried importing dist/esm/index.js directly, etc., but no matter how I try, I can't solve the issue.

kadengeyaa commented 1 year ago

This seems to be a problem in blurhash package.json.

To fix it, I had to edit node_modules/blurhash/package.json and added the line: "type": "module"

Then you can use object deconstruction to import blurhash

import { encode } from 'blurhash'

Thisen commented 1 year ago

I'll look into this, when I have some time.

davedbase commented 1 year ago

Confirmed, similar issue here. I'm writing a Vite plugin that leverages blurhash and get:

import { encode } from "blurhash";
         ^^^^^^
SyntaxError: Named export 'encode' not found. The requested module 'blurhash' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'blurhash';
const { encode } = pkg;

The issue is detailed above but I thought provide the exact issue as seen with my bundler.

I reverted to 1.1.3 which has the correct export. Using 2.0.0 is blocked until the export detailed above is resolved.

Thanks for maintaining this neat project.

Thisen commented 1 year ago

Hi all 👋🏼

Please try out 2.0.1 and let me know if that resolves your issues.

arpowers commented 1 year ago

@Thisen am using 2.0.1 and same issue.

Looks like is still loading the CJS version in Vite, giving error: 'module' is not defined or the does not provide export one above.

Thisen commented 1 year ago

@Thisen am using 2.0.1 and same issue.

Looks like is still loading the CJS version in Vite, giving error: 'module' is not defined or the does not provide export one above.

Could you provide me with a reproduction?

arpowers commented 1 year ago

@Thisen sure... https://github.com/kaption-co/blurhash-repro

Note that this repro excludes 'blurhash' from optimizing the default CJS file to ESM...

Thisen commented 1 year ago

@Thisen sure... https://github.com/kaption-co/blurhash-repro

Note that this repro excludes 'blurhash' from optimizing the default CJS file to ESM...

Thank you for the reproduction! It helped me to resolve the issue and it should work in 2.0.2. Please try it out.

Thisen commented 1 year ago

@Thisen sure... https://github.com/kaption-co/blurhash-repro Note that this repro excludes 'blurhash' from optimizing the default CJS file to ESM...

Thank you for the reproduction! It helped me to resolve the issue and it should work in 2.0.2. Please try it out.

https://github.com/woltapp/blurhash/pull/210 pointed out in exports field order, try 2.0.3. 💪🏼

Thisen commented 1 year ago

@mrtnzlml I see you had some issues, could you try out 2.0.3? :)

arpowers commented 1 year ago

@Thisen this is resolved for me in latest version.

Thisen commented 1 year ago

Awesome! Closing.

mrtnzlml commented 1 year ago

Hi @Thisen! 👋 There is still some breaking change in the patch release, as you can see in this PR: https://github.com/adeira/universe/pull/5088

The situation got better. I can start the application with blurhash 2.0.3; however, it's still failing in Jest tests. 😞

Thisen commented 1 year ago

Hi @Thisen! 👋 There is still some breaking change in the patch release, as you can see in this PR: adeira/universe#5088

The situation got better. I can start the application with blurhash 2.0.3; however, it's still failing in Jest tests. 😞

I can't speak into that. I'd need a new issue with a reproduction :)

janpe commented 1 year ago

Hi @Thisen! 👋 There is still some breaking change in the patch release, as you can see in this PR: adeira/universe#5088

The situation got better. I can start the application with blurhash 2.0.3; however, it's still failing in Jest tests. 😞

I'm seeing this as well. Jest tests break at 2.0.3. @mrtnzlml did you find a workaround?

janpe commented 1 year ago

Ok I see that adding blurhash into transformIgnorePatterns in Jest config is a workaround for this bug. Not sure where this happens but it seems like a bug in this project @Thisen

Thisen commented 1 year ago

Ok I see that adding blurhash into transformIgnorePatterns in Jest config is a workaround for this bug. Not sure where this happens but it seems like a bug in this project @Thisen

A new issue with a reproduction would be great. 👍🏼

mrtnzlml commented 1 year ago

@janpe I didn't have time to check it yet or prepare a repro. Thanks for the suggested workaround! 👏 It is certainly a breaking change in a patch release. 😞