Jimp error when using this package in the electron project's main process (background.js)

[LehaoLin]

Error shown as below

TypeError: Jimp.read is not a function
    at eval (webpack:///./node_modules/replace-color/src/replace-color.js?:43:10)
    at new Promise (<anonymous>)
    at module.exports (webpack:///./node_modules/replace-color/src/replace-color.js?:20:10)
    at IpcMainImpl.eval (webpack:///./src/background.js?:222:5)

And my code in the background.js is

var replaceColor = require('replace-color')
replaceColor({
      image: path_to_image,
      colors: {
        type: 'hex',
        targetColor: targetColor,
        replaceColor: '#00000000'
      },
      deltaE: 10
})
...

I trace the error message, and found the error is happened when reading the image. which is in the node_modules/replace-color/src/replace-color.js line 43

Jimp.read(image)

I tried many ways including add async await stuff to make the process sync, but it is still not working. Then no idea how to solve it.

[LehaoLin]

I find the solution, but not perfect. I am using electron 13.0 with node 14.16.0 I found When Jimp in the electron background.js Jimp is

{
  default: [Function: Jimp] {
    AUTO: -1,
    HORIZONTAL_ALIGN_LEFT: 1,
    HORIZONTAL_ALIGN_CENTER: 2,
    HORIZONTAL_ALIGN_RIGHT: 4,
    VERTICAL_ALIGN_TOP: 8,
    VERTICAL_ALIGN_MIDDLE: 16,
    VERTICAL_ALIGN_BOTTOM: 32,
    BLEND_SOURCE_OVER: 'srcOver',
    BLEND_DESTINATION_OVER: 'dstOver',
    BLEND_MULTIPLY: 'multiply',
    BLEND_SCREEN: 'screen',
    BLEND_OVERLAY: 'overlay',
    BLEND_DARKEN: 'darken',
    BLEND_LIGHTEN: 'lighten',
    BLEND_HARDLIGHT: 'hardLight',
    BLEND_DIFFERENCE: 'difference',
    BLEND_EXCLUSION: 'exclusion',
    EDGE_EXTEND: 1,
    EDGE_WRAP: 2,
    EDGE_CROP: 3,
    __extraConstructors: [],
    appendConstructorOption: [Function (anonymous)],
    read: [Function (anonymous)],
    create: [Function (anonymous)],
    rgbaToInt: [Function (anonymous)],
    intToRGBA: [Function (anonymous)],
    cssColorToHex: [Function (anonymous)],
    limit255: [Function (anonymous)],
    diff: [Function (anonymous)],
    distance: [Function (anonymous)],
    compareHashes: [Function (anonymous)],
    colorDiff: [Function (anonymous)],
    decoders: {
      'image/jpeg': [Function: decode],
      'image/png': [Function (anonymous)],
      'image/bmp': [Function: decode],
      'image/x-ms-bmp': [Function: decode],
      'image/tiff': [Function (anonymous)],
      'image/gif': [Function (anonymous)]
    },
    encoders: {
      'image/jpeg': [Function (anonymous)],
      'image/png': [Function (anonymous)],
      'image/bmp': [Function: encode],
      'image/x-ms-bmp': [Function: encode],
      'image/tiff': [Function (anonymous)]
    },
    hasAlpha: { 'image/png': true },
    MIME_JPEG: 'image/jpeg',
    MIME_PNG: 'image/png',
    PNG_FILTER_AUTO: -1,
    PNG_FILTER_NONE: 0,
    PNG_FILTER_SUB: 1,
    PNG_FILTER_UP: 2,
    PNG_FILTER_AVERAGE: 3,
    PNG_FILTER_PATH: 4,
    MIME_BMP: 'image/bmp',
    MIME_X_MS_BMP: 'image/x-ms-bmp',
    MIME_TIFF: 'image/tiff',
    MIME_GIF: 'image/gif',
    ...
  }
}

with default in the object. Therefore, Jimp.read() is not function. But following code works.

Jimp.default.read()

So just Jimp.read(image) -> Jimp.default.read(image) in the node_modules/replace-color/src/replace-color.js line 43.

Then I am curious about how it works under the nodejs. I console.log(Jimp) in the nodejs. And get

[Function: Jimp] {
  AUTO: -1,
  HORIZONTAL_ALIGN_LEFT: 1,
  HORIZONTAL_ALIGN_CENTER: 2,
  HORIZONTAL_ALIGN_RIGHT: 4,
  VERTICAL_ALIGN_TOP: 8,
  VERTICAL_ALIGN_MIDDLE: 16,
  VERTICAL_ALIGN_BOTTOM: 32,
  BLEND_SOURCE_OVER: 'srcOver',
  BLEND_DESTINATION_OVER: 'dstOver',
  BLEND_MULTIPLY: 'multiply',
  BLEND_SCREEN: 'screen',
  BLEND_OVERLAY: 'overlay',
  BLEND_DARKEN: 'darken',
  BLEND_LIGHTEN: 'lighten',
  BLEND_HARDLIGHT: 'hardLight',
  BLEND_DIFFERENCE: 'difference',
  BLEND_EXCLUSION: 'exclusion',
  EDGE_EXTEND: 1,
  EDGE_WRAP: 2,
  EDGE_CROP: 3,
  __extraConstructors: [],
  appendConstructorOption: [Function (anonymous)],
  read: [Function (anonymous)],
  create: [Function (anonymous)],
  rgbaToInt: [Function (anonymous)],
  intToRGBA: [Function (anonymous)],
  cssColorToHex: [Function (anonymous)],
  limit255: [Function (anonymous)],
  diff: [Function (anonymous)],
  distance: [Function (anonymous)],
  compareHashes: [Function (anonymous)],
  colorDiff: [Function (anonymous)],
  decoders: {
    'image/jpeg': [Function: decode],
    'image/png': [Function (anonymous)],
    'image/bmp': [Function: decode],
    'image/x-ms-bmp': [Function: decode],
    'image/tiff': [Function (anonymous)],
    'image/gif': [Function (anonymous)]
  },
  encoders: {
    'image/jpeg': [Function (anonymous)],
    'image/png': [Function (anonymous)],
    'image/bmp': [Function: encode],
    'image/x-ms-bmp': [Function: encode],
    'image/tiff': [Function (anonymous)]
  },
...
}

without default under the object. Therefore, I think that it maybe happened because of under the electron. I think we should add a if-else condition before the Jimp.read(image), but currently I don't know what's the specific reason is and how to add this condition.

I fork this repo and audit to Jimp.default.read(image) in https://github.com/LehaoLin/replace-color If you meet the same problem, you can change the content in package.json from

"dependencies": {
    "replace-color": "^2.3.0",
}

to

"dependencies": {
    "replace-color": "LehaoLin/replace-color",
}

then run npm install to re-install the package. Hope the author can fix this bug. Many thanks!