jimp__WEBPACK_IMPORTED_MODULE_2__.read is not a function from Electron

[zaun]

Expected Behavior

Read a file from the local filesystem

Current Behavior

Unable to read a file from the local filesystem

Failure Information (for bugs)

Uncaught Exception:
TypeError: jimp__WEBPACK_IMPORTED_MODULE_2__.read is not a function
    at EventEmitter.eval (webpack:///./src/background.ts?:37:50)
    at EventEmitter.emit (events.js:200:13)
    at WebContents.<anonymous> (/Users/justinzaun/Development/launchedto.space/editor/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/api/web-contents.js:335:21)
    at WebContents.emit (events.js:200:13)

Steps to Reproduce

I've setup an Election VUE application using the vue-cli-plugin-electron-builder VUE CLI plugin. I'm including Jimp and trying to create a thumbnail.

In the Electron background.ts I've got:

 import * as jimp from 'jimp';
 ...
ipcMain.on('jimp-launch-media', (event, { infile, outfile }) => {
   jimp.read(infile, (err, img) => {
     if (err) {
       console.log(err);
       return;
     }

     img.resize(500, jimp.AUTO) // resize
       .quality(60) // set JPEG quality
       .write(outfile); // save
   });
 });

Then the code is called I get the above error.

Context

• Jimp Version: 0.9.3
• Operating System: OS X
• Electron version: 5.1.7

I have my vue.config.js setup with the following web pack information:

module.exports = {
  transpileDependencies: [
    'vuetify',
  ],
  configureWebpack: {
    resolve: {
      mainFields: ['module', 'main'],
    },
  },
};

Failure Logs

Uncaught Exception:
TypeError: jimp__WEBPACK_IMPORTED_MODULE_2__.read is not a function
    at EventEmitter.eval (webpack:///./src/background.ts?:37:50)
    at EventEmitter.emit (events.js:200:13)
    at WebContents.<anonymous> (/Users/justinzaun/Development/launchedto.space/editor/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/api/web-contents.js:335:21)
    at WebContents.emit (events.js:200:13)

[gerbill]

@zaun , did you find a solution for this?

[zaun]

@gerbill - Sorry no, I moved on to something else and have't been back to this.

[Jasonnor]

@zaun @gerbill
I found that using Jimp.default.read() instead of Jimp.read() can solve the WEBPACK_IMPORTED_MODULE issue. e.g.,

import * as Jimp from 'jimp';
const image = await Jimp.default.read(frame).then((imageBuffer) => imageBuffer.resize(dims[2], dims[3]));

[hipstersmoothie]

Jimp would probably use an ESM refresh. If anyone is up for that PR I'll help get it merged and released

[hipstersmoothie]

I fixed the module build #1149

[oladotunbindy]

The module build hasn't solved this issue as I am still experiencing the issue as descriped above with the latest Jimp version. I recently upgraded my react-script from 4 to 5, then I started experiencing this issue. Any help @hipstersmoothie

[hipstersmoothie]

Are trying to use jimp in node or browser? esm?

[oladotunbindy]

Are trying to use jimp in node or browser? esm?

I am using it in the browser with my React App. The error I get is in the image attached below.

[hipstersmoothie]

Can you show me how you're importing jimp?

[oladotunbindy]

Can you show me how you're importing jimp?

Yes, I am importing it like below.

import Jimp from 'jimp';

I have also tried other suggestions in this thread such as import * as Jimp from 'jimp';

Making use of it like this to read my image const jimpImage = await Jimp.read(imageSrc); in my async function.

[hipstersmoothie]

Try

import Jimp from 'jimp/browser/lib/jimp.js';

[hipstersmoothie]

We're working on browser esm support but this browser version should work for now

[oladotunbindy]

Try

import Jimp from 'jimp/browser/lib/jimp.js';

Thanks for your response, still the same error message I am getting. Its not working. Started experiencing this issue only after upgrading my react-scripts from 4 to 5.

[hipstersmoothie]

react script might be on an older version of jimp

[oladotunbindy]

react script might be on an older version of jimp

I updated my react-script as well as my jimp version also. It seems to be an issue with the changes in webpack 5 that come with the react-script 5. Similar to what this Painterro library maintainer stated here but his supposed fix doesn't work for me.

https://hinty.io/devforth/fix-webpack-imported-module-is-not-a-function-for-webpack5/

[floralbxhh]

Hello I am also trying jimp in Angular and the error mentioned above is showing also for me:

package.json:
{ "name": "jimp-demo", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "^15.1.0", "@angular/common": "^15.1.0", "@angular/compiler": "^15.1.0", "@angular/core": "^15.1.0", "@angular/forms": "^15.1.0", "@angular/platform-browser": "^15.1.0", "@angular/platform-browser-dynamic": "^15.1.0", "@angular/router": "^15.1.0", "jimp": "^0.22.7", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.12.0" }, "devDependencies": { "@angular-devkit/build-angular": "^15.1.6", "@angular/cli": "~15.1.6", "@angular/compiler-cli": "^15.1.0", "@types/jasmine": "~4.3.0", "@types/node": "^18.14.2", "jasmine-core": "~4.5.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", "typescript": "~4.9.4" } }

tsconfig.json
/* To learn more about this file see: https://angular.io/config/tsconfig. */ { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, "strict": false, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, "target": "ES2022", "allowSyntheticDefaultImports": true, "module": "ES2022", "useDefineForClassFields": false, "lib": ["ES2022", "dom"] }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, "strictInputAccessModifiers": true, "strictTemplates": true } }

[Ronkiro]

Browser support is being verified in #1194

[LetMeDream]

Facing same
'jimp_browser_lib_jimp_js__WEBPACK_IMPORTED_MODULE_1___default(...).read is not a function'
problem in my CRA app.

Tried everything you've gone thru in this issue, but to no avail.

[sadeq-qafari]

I'm facing same problem in react:
TypeError: jimp__WEBPACK_IMPORTED_MODULE_12___default.a.read is not a function

[mspi92]

I had a similar issue. It seems as if jimp is exporting the "Jimp" global variable.
Importing jimp as

import "jimp";
Jimp.read(...);

works for me

[HellFoxx]

@mspi92
This works fine for me:

import { Jimp as JimpType, JimpConstructors } from '@jimp/core';
import 'jimp';

declare const Jimp: JimpType & JimpConstructors;

[Sathyakala2002]

In my case, it shows like this TypeError: Cannot read properties of undefined (reading 'read')

[a5okol]

Any updates on this?

[hipstersmoothie]

No updates as I don't look at closed issue very much. If you have a specific issue please open another issue. And if you think you can improve the above issues PRs are always welcome <3

[devodii]

I found a way around it.

I'm using server actions in Nezt js, meaning that you can also use the old api routes to handle this.

This is what the final util looked like:

"use server"

import * as Jimp from "jimp"

export const resizeImageViaImageUrl = async (url: string) => {
  try {
    const response = await fetch(url)
    const buffer = await response.arrayBuffer()
    const file = await Jimp.default.read(Buffer.from(buffer))
    const resize = file.resize(200, 200).quality(80)

    const image = await resize.getBase64Async(Jimp.MIME_PNG)

    return image
  } catch (error) {
      alert(error.message)
  }
}

Mostimes, you dont want users to provide an image url, you would want to hook this up wth some sort of file reader api, right?

It's very simple. just create another state that shoud be responsible for updating the url of the currrently selected image.
If you're a react developer, this is what i mean:

 const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFile = event.target.files?.[0]
    setFile(selectedFile as File)

    if (selectedFile) {
      const reader = new FileReader()
      reader.onload = () => {
        setPreviewUrl(reader.result as string)
      }
      reader.readAsDataURL(selectedFile)
    } else {
      setPreviewUrl(null)
    }
  }

we can now pass the previewUrl value to the image resize function.

works like magic 🪄

[gitTerebi]

I had a similar issue. It seems as if jimp is exporting the "Jimp" global variable. Importing jimp as

import "jimp";
Jimp.read(...);

works for me

Works only in dev, once I do a prod build it fails

[y0useff]

has anyone found a permanent solution for this? i cannot run my app using my npm start, however if i manually execute the file using node, it runs fine

[bng94]

I am also getting the same error,

TypeError: jimp__WEBPACK_IMPORTED_MODULE_5___default(...).read is not a function

the following importing jimp helped but gave errors.
import { Jimp as JimpType, JimpConstructors, JimpPlugin } from "@jimp/core"; import "jimp"; declare const Jimp: JimpType & JimpConstructors;

Here are the error with this import of jimp; for my image from s3 bucket I am getting cors error(jimp related; the image works outside of jimp)

Property 'MIME_PNG' does not exist on type 'Jimp & JimpConstructors'.

Would love to see a permanent solution for the TypeError, instead of trying to find loopholes to fix it.

[gitTerebi]

I had to run everything inside a pure node environment, ie outside renderer and did const Jimp = require('jimp');

I didn't have problems after that.

The problem though is if you use webpack and your code has node integration true, you need to guess which one works both in dev mode and once again in prod mode.