Jimp not working on React Native

[Njinou]

Expected Behavior

I expect the library to work properly and the image to be shrink in size for a better User Experience.

Current Behavior

It crashes with this error: [TypeError: _$$_REQUIRE(dependencyMap[9], "jimp").read is not a function. (In '$$_REQUIRE(dependencyMap[9], "jimp").read('https://media.geeksforgeeks.org/wp-content/uploads/20190328185307/gfg28.png')', '$$_REQUIRE(_dependencyMap[9], "jimp").read' is undefined)]

Failure Information (for bugs)

Steps to Reproduce

yarn add Jimp on react-native vanilla
//import Jimp from "jimp";
Or
var Jimp = require("jimp");

try{
Jimp.read
('https://media.geeksforgeeks.org/wp-content/uploads/20190328185307/gfg28.png').then (image => console.log("Images",image))
.catch(e => console.log("first casth ",e))
}
catch(e){
console.log("this is the error ",e);
}

Screenshots

Context

• Jimp Version:
• Operating System:
• Node version:
  ## Failure Logs

[marvinruder]

I am not too familiar with React Native, but its Javascript engine might require the browser version of Jimp. This is how I got it running in (classic) React:

await import("jimp/browser/lib/jimp.js"); // This statement loads the browser version of Jimp and makes it available as the global variable `window.Jimp`.
const { Jimp } = window as typeof window & { Jimp: any }; // any can probably be replaced with something else from the Jimp package

[marvinruder]

Issue also reproducable in Node, see marvinruder/jimp-no-types-available.

(Browser version might still help for the moment.)

[marvinruder]

@Njinou Can you share your Typescript configuration with us? I was able to reproduce the issue in a setup with allowSyntheticDefaultImports set to true, but without esModuleInterop. After replacing allowSyntheticDefaultImports with esModuleInterop, Jimp works fine for me.

[Njinou]

Oh i have a nodejs React Native project not a typescript one so on this particular project i do not have the tsconfig.json file Not aure if it does matter. Thanks

…

On Tue, Feb 7, 2023, 12:05 PM Marvin A. Ruder ***@***.***> wrote: @Njinou <https://github.com/Njinou> Can you share your Typescript configuration with us? I was able to reproduce the issue in a setup with allowSyntheticDefaultImports set to true, but without esModuleInterop. After replacing allowSyntheticDefaultImports with esModuleInterop, Jimp works fine for me. — Reply to this email directly, view it on GitHub <#1191 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AH7ZT5XJMJM5VO2B5MKAAQ3WWIT6ZANCNFSM6AAAAAAUTV3TUI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[marvinruder]

Okay, I tried reproducing the issue in plain Javascript, but was unsuccessful so far. Perhaps you can provide a small repository setup which reproduces the issue?

Edit: nevermind, I am able to reproduce it using classic React and plain Javascript.

[marvinruder]

@hipstersmoothie Can you have a look at my MWE repo marvinruder/jimp-react?

It appears that over the years many issues were found when attempting to use Jimp in frontend tools like React (Native) (see this one and also #1091, #761), so maybe we can use a setup like mine to find and fix them one by one? Perhaps the more general goal of getting Jimp running in frontend tools should be tracked in a separate issue? Let me know what you think!

[hipstersmoothie]

Yeah let's do that!

I just invited you to the org. Maybe you could transfer the repo there and we could use it to test issues like this in the future.

I think that you should created another issue that tracks this like you said and merge all of these other issues into it

[hipstersmoothie]

Once you access the invite I'll also give you triage access to this repo

[marvinruder]

Thanks for reporting this bug, @Njinou! We are currently investigating several issues with Jimp in frontend tools such as React [Native], and will consolidate the discussion there. We will therefore close this issue as duplicate, but continue to work on a fix. You can follow the progress on that in #1194.

[Njinou]

@marvinruder Please let me know if I can be of any help to speed up the fix
Thanks