Node-canvas dependency packages are too large to build project on Netlify

[scott-schibli]

Steps to Reproduce

Follow the installation guide.
I am running on OS Big Sur 11.5.2: and I had trouble initially using, so I ran the OS command for compiling :

brew install pkg-config cairo pango libpng jpeg giflib librsvg.

I then import 'canvas' into a Nextjs Api Route to watermark images in a node environment before sending to the server (as I cannot load the non-watermarked images into the browser in any scenario.

This works completely fine on my local machine - BUT when I try to push my project to netflify - which pushes to AWS, it is trying to install the package in a different environment. I assume this is totally normal, however, the dependency package for node-canvas named librsvg-2.so.2 is very large. It causes my project size to go over the maximum limit.

I do not even need librsvg-2.so.2 (as in I do not need support for svg's). So I then prevent downloading this node dependency on build, which works to build the project and push it live. However, now when I call my api route the package crashes as its missing a dependency--Which I thought this was not a necessary dependency to node-canvas? Only an optional one?

Any thoughts on this? Has anyone run into a similar situation trying to use node-canvas while hosting on netlify?

Many thanks in advance!

[spence]

Running into the same issue on Vercel. ibrsvg-2.2.dylib is 22MB and we're not using this. Removing this breaks the library.

[benjamindell]

I have the same issue too. Did either of you two find a fix?

[LinusU]

It seems like you are using the prebuilt version of node-canvas? If you build your own version you can make it only include the libraries you want. jpeg, gif, and svg are optional.

The prebuilt version includes support for all image formats as to be the most useful to most people.

[iamdagy]

Hoy can I build my own later version ? Thanks

[iamdagy]

@LinusU I realized that I don't need the svg library is actually the biggest size with over 100 mb. or gif. but the question, is how do I remove them or install canvas without them. Im trying to use node-canvas in Netlify functions. and I dont have access to apt-get.. thanks a lot

[benjamindell]

Does anyone have an example of how to build your own version of node-canvas? I've been googling for ages and cant seem to find anything concrete. I basically just need to build a version without SVG support but cant seem to find any examples :(

[tourbillonlabs]

@scott-schibli Did you find a solution for this?

Edit:
Someone provided an example of how to do a custom build for netlify here (mixed success): https://answers.netlify.com/t/node-canvas-error-libuuid-so-1-cannot-open-shared-object-file-no-such-file-or-directory/30179/6

I would have preferred to stick with node-canvas, but purely to get past the bundle size issue on Netlify without overcomplicating the build process, I switched to pureimage as their provided functionality met my requirements.

[CanIGetaPR]

Does anyone have an example of how to build your own version of node-canvas? I've been googling for ages and cant seem to find anything concrete. I basically just need to build a version without SVG support but cant seem to find any examples :(

I have no clue, it seems extremely difficult and I have been trying for the past two days to do so.

Take a look: https://github.com/CanIGetaPR/node-canvas-lambda/actions

I've come to realize the Dockerfile is just a pre-made dev environment for building from source.

The make prebuilds action should be compiling a prebuilt version and create a release so I've been trying to get that to work now. I've had countless problems with setup node, and also pax utils switched from using make to meson but their meson build script is broken. The Docker dev environment seems too old to run apt on. I'll keep hammering away but yeah. It's a bit difficult.

The key change I made to the source code is removing the svg reference in pawnstudios@3a766e7

I tried executing npm --install-from-source in the root directory but that does not link the libraries like node-gyp is so there was an issue using the build and I am stuck trying to get the prebuild action to work.

This issue is also related to #2130

EDIT: I've been using the wrong branch all along. I should have been executing prebuild from the prebuild branch. And of course github limits us from forking a repository a second time.

[CanIGetaPR]

Okay I've successfully built canvas from source. https://github.com/CanIGetaPR/node-canvas-slim/releases/tag/v2.11.0-nano

The instructions for building from source are as follows:

1. Fork the repository with all branches.
2. Create a new branch with the release name you want to choose.
3. Make any source changes in this branch.
4. Switch to the prebuilds branch. Edit .github/workflows/prebuild.yaml. Specifically edit canvas_tag: ["v2.11.0"] replace v2.11.0 with the name of your branch.
5. As instructed in the prebuild.yaml file, create a new draft release and specify the branch name as the tag (just ignore githubs warning.)
6. Run the prebuild workload in github actions (on the prebuilds branch).

I'll need some more tinkering to figure out how to prevent the svg library from being included in the output.

[vdiezel]

I tinkered around and this is my understanding of it:

When libraries are installed, they will be automatically linked to the canvas binary. This is defined in the binding.gyp.
If you are not on the windows (I'm sure there is a similar way for windows in this file), you will find this code there:

}, {  # 'OS!="win"'
      'variables': {
        'with_jpeg%': '<!(node ./util/has_lib.js jpeg)',
        'with_gif%': '<!(node ./util/has_lib.js gif)',
        'with_rsvg%': '<!(node ./util/has_lib.js rsvg)'
      }
    }]

you can change the values to 'false' , e.g. for svg

}, {  # 'OS!="win"'
      'variables': {
        'with_jpeg%': '<!(node ./util/has_lib.js jpeg)',
        'with_gif%': '<!(node ./util/has_lib.js gif)',
        'with_rsvg%': 'false'
      }
    }]

That will prevent linking the libraries that you don't want to use. E.g. you could update this file and then run npx node-gyp rebuild from within the canvas folder. That will generate the desired binary and if you have any "dead" libraries hanging around, you can delete them.

For debugging on linux you can run ldd node_modules/build/Release/canvas.node - that will tell you which libraries are linked. So you can make sure that no library is required that you didn't want. Not sure about other OS for debugging.

The other option would be to spin up a container (e.g. when you need to build it for another platform) and simply don't install the libraries that you don't want. Create the canvas binary there, gather all libraries, then when you want to deploy overwrite the automatically generated canvas.node with your custom one, clean up the libraries and put your own lib folder somewhere where your canvas binary will find them. Here is an example of what I did for AWS Lambda Node16 with only PNG support: https://github.com/vdiezel/docker-node-canvas

[kadishmal]

I've done the following in the buildspec.yml used by AWS CodeBuild.

phases:
  install:
    commands:
      - npm install
      # Disable RSVG, GIF and JPEG libraries in Canvas. We work only with PNG files.
      - sed -E -i -e 's/<!\(node .\/util\/has_lib.js (rsvg|gif|jpeg)\)/false/g' node_modules/canvas/binding.gyp
      # Install Canvas development dependencies to build from source code.
      - yum install -y gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel
      # Build from source.
      - node_modules/.bin/node-pre-gyp install --build-from-source --runtime=node --directory node_modules/canvas
      # Copy dependency libraries to the package for bundling.
      - mkdir lib
      # Download and run the lddtree script to extract all dependencies.
      - curl https://raw.githubusercontent.com/ncopa/lddtree/v1.26/lddtree.sh -o lddtree.sh
      - chmod +x lddtree.sh
      - cp $(./lddtree.sh -l node_modules/canvas/build/Release/canvas.node | grep '^\/lib' | sed -r -e '/canvas.node$/d') lib/
      - ls lib/*
artifacts:
  base-directory: src
  files:
    - ./**/*.js
    - ./**/*.png
    # Include production dependencies if any.
    - ../node_modules/**/*
    - ../lib/*
  exclude-paths:
    - ../coverage
    - ../integration-tests/**/*
    - ../node_modules/@aws-sdk/**/*
    - ../node_modules/@types/**/*
    # AWS SDK v2 includes about 50MB unnecessary TypeScript type files.
    - ../node_modules/**/*.d.ts
    - ../node_modules/aws-sdk/**/*.d.ts
    - ../node_modules/aws-sdk/dist/**/*
    # Canvas includes a 100MB size `libsvg` library that we do not use in production.
    - ../node_modules/canvas/build/Release/librsvg-*

Hope this helps you, too.