bored panda
bored panda

Reputation: 51

TypeError: mergeImages is not a function

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.

Upvotes: 1

Views: 595

Answers (1)

Steven Spungin
Steven Spungin

Reputation: 29109

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)

Upvotes: 4

Related Questions