search

jimp-dev / jimp

An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
http://jimp-dev.github.io/jimp/
MIT License
13.99k stars 760 forks source link

Error with using jimp in my typescript react app, I think it is a webpack issue("Uncaught ReferenceError: process is not defined") #1091

Closed zachzafar closed 1 year ago

zachzafar commented 2 years ago

React app should display

Current Behavior

App is compiled successfuly however the app does not display and the following error is logged to the console in the browser

Failure Information (for bugs)

request.js:3 Uncaught ReferenceError: process is not defined at ./node_modules/@jimp/core/es/request.js (request.js:3:1) at options.factory (react refresh:6:1) at webpack_require__ (bootstrap:24:1) at fn (hot module replacement:62:1) at ./node_modules/@jimp/core/es/index.js (index.js:12:1) at options.factory (react refresh:6:1) at webpack_require__ (bootstrap:24:1) at fn (hot module replacement:62:1) at ./node_modules/@jimp/custom/es/index.js (index.js:1:1) at options.factory (react refresh:6:1)

Steps to Reproduce

  1. create a typescript react app with the following steps mentioned in https://github.com/metaplex-foundation/js-examples/tree/main/getting-started-react-cra5

  1. create a function.js file where we will create a function called imageGenerator that uses jimp

  2. import that function in a react component to be used in another function

Failure Logs

pntehan commented 2 years ago

me, too, fuck

zachzafar commented 2 years ago

If you are trying to composite images theres a library I used called ‘merge-images’ that works quite fine instead of jimp

pntehan commented 2 years ago

If you are trying to composite images theres a library I used called ‘merge-images’ that works quite fine instead of jimp

I solved this problem, which was very ridiculous, I commented related codes in "jimp/core/dist/request.js" and "jimp/core/es/request.js" that lines include the variable "process".

yuanquan8 commented 2 years ago

look https://github.com/vitejs/vite/issues/1973#issuecomment-787571499

marvinruder commented 1 year ago

From the error stack containing …/@jimp/core/es/…, I assume that you are using jimp or jimp/es in your imports. In React, I use the browser version of Jimp:

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
hipstersmoothie commented 1 year ago

Hmm how could we solve this in a way so that you can use the es version but we still have env vars

danielholmes commented 1 year ago

process is no longer referenced in this module since https://github.com/jimp-dev/jimp/pull/1165/files#diff-b006a5b348be759a61096ee2df4a193a6e822bfaee285593ed0dc242c2acef9f. This particular issue should be fixed