-
-
Notifications
You must be signed in to change notification settings - Fork 779
Jimp Browser Support #1194
Copy link
Copy link
Closed
Labels
bugthere is a bug in the way jimp behavesthere is a bug in the way jimp behaveshelp wantedreleasedThis issue/pull request has been released.This issue/pull request has been released.
Milestone
Metadata
Metadata
Assignees
Labels
bugthere is a bug in the way jimp behavesthere is a bug in the way jimp behaveshelp wantedreleasedThis issue/pull request has been released.This issue/pull request has been released.
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.readis 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 definedin browser console, caused byprocess.env.__TESTING_MKDIRP_PLATFORM__in dependencymkdirpjimp/esimport, accessing some built-in Node APIs likefs,pathetc. 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 handlejimporjimp/esproperly.