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

[zachzafar]

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

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

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

• Jimp Version: ^0.16.1
• Operating System:macOS Big Sur
• Node version:14.17.4

Failure Logs

[pntehan]

me, too, fuck

[zachzafar]

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

[pntehan]

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]

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

[marvinruder]

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]

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

[danielholmes]

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