-
-
Notifications
You must be signed in to change notification settings - Fork 762
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Jimp Browser Support #1194
Comments
It might be worthwhile to explore an option similar to how @wmhilton has done so with https://isomorphic-git.org/docs/en/fs#docsNav @wmhilton has even created a browser-first FS package called "LighningFS" that might be a good package to point to for official browser support, alongside an example repo that integrates it: https://github.com/isomorphic-git/lightning-fs |
Also worth mentioning - @marvinruder you may want to look into the work being done by @danielholmes : https://github.com/danielholmes/jimp-vite |
It can work well on example, this lib using for node so some related packages don't work you need to use a build for the browser version and then I have resolved this and workaround by loading jimp.js on index.html and defining a global type for Jimp variable |
Yeah that one works but we're talking about esm usage rather than bundling. Bundling means we can't tree shake things. Right now our esm breaks browsers |
I'm having this issue too, is a solution in the works or is there a specific suggested workaround? |
My solution for NextJS was to load jimp and import from window, similar approach from the issue's text but not using the library for the browser (it was giving me the error that Code:
Hope it helps anyone |
This really helps me to get through this issue for now! Struggled for a few hours, thanks! |
I tried all the suggestions, but still couldn't make it work... I'm trying to use Jimp in a Web Worker, with Vite. So, I'm not being able to use the lib. |
I got Jimp working in the browser/webworker/node/... with this ugly hack: ES6: // For some reason, Jimp attaches to self, even in Node.
// https://github.com/jimp-dev/jimp/issues/466
import * as _Jimp from 'jimp';
// @ts-ignore
const Jimp = (typeof self !== 'undefined') ? (self.Jimp || _Jimp) : _Jimp; CommonJS: // For some reason, Jimp attaches to self, even in Node.
// https://github.com/jimp-dev/jimp/issues/466
const _Jimp = require('jimp');
// @ts-ignore
const Jimp = (typeof self !== 'undefined') ? (self.Jimp || _Jimp) : _Jimp; |
@xenova I don't know why this works, but it works. I've been struggling to get Jimp working on Cloudflare Workers (using SvelteKit) for wayyy too long and you're solution just works. One thing I noticed using your solution is instantiating a new Jimp instance I have to do I am extremely grateful that you shared your solution, so thanks <3. |
That's exactly what I thought when I got it working 🤣 ...
Interesting. I haven't had an issue with creating new Jimp instances with my node.js version... but it's good to know you found a solution!
Happy to help! |
Ok but, where is that code supposed to go inside the next Js project? In the component that's gonna use Jimp? |
This works in Next JS and apps created using CRA. Not in Vite, tho. |
No luck when using it in a webpage in a typescript project:
w |
Because some were wondering why your proposed workaround works: if (process.env.ENVIRONMENT === "BROWSER") {
// For use in a web browser or web worker
/* global self */
let gl;
if (typeof window !== "undefined" && typeof window === "object") {
gl = window;
}
if (typeof self !== "undefined" && typeof self === "object") {
gl = self;
}
gl.Jimp = Jimp;
gl.Buffer = Buffer;
} I don't know why and I don't think I will look into it, but maybe this will give the right person a starting idea on where to look to resolve this issue. |
Any help from someone in the community would be appreciated. If you want to submit a PR I'd be happy to Shepard that PR. At the time unfortunately I don't see myself doing this soon. |
Just for others usign React, the workaround mentioned on the issue's text worked for me: export default function App() {
require("jimp/browser/lib/jimp.js");
const { Jimp } = window
...
}; this also worked: import 'jimp';
export default function App() {
const { Jimp } = window;
...
}; |
Thanks for this suggestion. This worked for me. |
For Vercel edge the workaround mentioned by @xenova works locally but not on production and even locally you have to set |
My solution. Version 0.22.10
|
none of these work very well for typescript... |
@meepen check my comment #1194 (comment) it may help you |
For react native/expo with hermes engine, this actually works, I cannot understand why it is like that, any insigths would be very helpful.
|
@sameert89 React Native newbie here, but it seems that |
Maybe try this: import "jimp";
const ReactComponent = () => {
const { Jimp } = window as Window & typeof globalThis & {
Jimp: typeof import("jimp");
};
... |
I was very excited to find this comment, since I am also trying to use Jimp in React Native (w/o Expo), but it does not work for me. Or it partly works, in that I can use the constructor to create an object to receive an image:
But I can't seem to use that value to access functionality like Jimp.read() which is what I need. |
For those want to use jimp in browser with typescript definition, here's a guide. import 'jimp/browser/lib/jimp.js' Then, add a dts file declare var Jimp: typeof import('jimp') Just use |
@sexnine Can you please prove the example code for Cloudflare? I can't get it work for some reason. |
Are you using Sveltekit on CF workers, or just vanilla workers? Typescript or JS? I can try to make a quick demo later today :) |
|
🚀 Issue was released in |
Is your feature request related to a problem? Please describe.
At the moment, some problems arise when attempting to use Jimp in React (similar issues were reported from users of other tools, e.g. React Native). The following are known so far:
Jimp.read
is undefined / not a function – can be avoided by using Typescript’suseModuleInterop: true
, no fix yet for plain Javascript. Reproducable in jimp-dev/jimp-react. Might be related to Jimp not working on React Native #1191, Cannot read properties of undefined (reading 'replace') #1178, undefined is not an object (evaluating 'gl.Jimp = Jimp') #761.process is not defined
in browser console, caused byprocess.env.__TESTING_MKDIRP_PLATFORM__
in dependencymkdirp
jimp/es
import, accessing some built-in Node APIs likefs
,path
etc. is attempted and the build fails (example:Can't resolve 'fs' in '…/node_modules/@jimp/core/es'
). Reproducable in jimp-dev/jimp-reactDescribe the solution you'd like
The issues described above are resolved and Jimp can be used in frontend tools like React using
import Jimp from "jimp[/es]";
without a problem.Describe alternatives you've considered
Using the browser version of Jimp via
require("jimp/browser/lib/jimp.js"); const { Jimp } = window;
is a possible workaround, but that version is aimed more at using Jimp in plain HTML/JS than by bundling tools such as Webpack, Rollup etc., which should be able to handlejimp
orjimp/es
properly.The text was updated successfully, but these errors were encountered: