jimp: jimp__WEBPACK_IMPORTED_MODULE_2__.read is not a function from Electron

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)

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 9
Comments: 25

Most upvoted comments

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

+24

mspi92 on Jul 5, 2023

@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]));

Jasonnor on Jan 12, 2023

@mspi92 This works fine for me:

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

declare const Jimp: JimpType & JimpConstructors;

HellFoxx on Nov 19, 2023

Try

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

hipstersmoothie on Feb 10, 2023

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.

LetMeDream on Apr 12, 2023

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

sadeq-qafari on May 2, 2023

Browser support is being verified in https://github.com/jimp-dev/jimp/issues/1194

Ronkiro on Mar 1, 2023

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.

oladotunbindy on Feb 10, 2023