TypeError: mergeImages is not a function

Question

I am trying to use this package merge-images to layer images (that I currently have in a temp folder) on top of each other and display it on my localhost webpage.
This is my code:

const mergeImages = require('merge-images');
const { Canvas, Image } = require('canvas');


function MyImage() {

    
mergeImages([
    '../../../Temp/base/ffa3bb.png', 
    '../../../Temp/trait/blur/variant_1/8abfff.png', 
    '../../../Temp/trait/blur/variant_2/f8f88c.png',
    '../../../Temp/lines.png'],
    {
        Canvas: Canvas,
        Image: Image
    })
    .then(b64 => document.querySelector('img').src = b64);
    

  return (
     <img src={Image} />
  );
}
  
  export default MyImage;

And I'm getting this error:

TypeError: mergeImages is not a function

But when I go to the definition of mergeImages I see that it is a function:

declare function mergeImages(sources: mergeImages.ImageSource[], options?: mergeImages.Options): Promise<string>;

I am fairly confident I have no idea what I'm doing and my mistake is likely stupid, and I probably have other mistakes any help is greatly appreciated.

Make sure it's installed correctly. `npm install merge-images`. Delete and reinstall node-modules if that doesn't work. — CertainPerformance, Dec 13 '21 at 23:48
deleted and reinstalled node-modules, still have the same error — bored panda, Dec 14 '21 at 00:10

score 4 · Accepted Answer · answered Dec 14 '21 at 00:01

If you are importing an es6 module, it might exported as default. The documentation uses es6 as the example, and that implies it is exported as default.

import mergeImages from 'merge-images';

So you might try

const mergeImages = require('merge-images').default;

One way to be sure is to log the item right after importing it, then inspect in the console.

const mergeImages = require('merge-images')
console.log('mergeImages', mergeImages)

TypeError: mergeImages is not a function

1 Answers1