Open JeffersonSchuler opened 3 years ago
If anyone is having this issue on Vercel (for a SvelteKit deployment) another non-code solution would be to setup your env var in your project settings. It's similar to what @FelipeSantos92Dev is suggesting.
Navigate to your project's settings, go to the Environment Variables area. enter LD_LIBRARY_PATH
for your key and /node_modules/canvas/build/Release
for the value. Click save and create a new build.
Note I'm using Node v16.x.x (selectable via your project settings as well)
set LD_PRELOAD works for me !
How do I do this in Vercel?
Did you figure this out? I'm stuck.
The issue was
fabric
. It includes an outdated version of jsdom, which references canvas 2.5.0. I'm using fabric-pure-browser now, which removes the canvas dependency.
Does fabric-pure-browser support Typescript?
I was getting the exact error by deploying a nextjs (13) app together with fabricjs (5.3.0) on vercel (with nodejs 18.).
This is what had worked for me:
create a vercel-build script in the package.json which looks like this:
"vercel-build": "yum install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel"
Those are the packages wich are mentioned in https://github.com/Automattic/node-canvas as a build requirement.
Next go into the project settings of your vercel project and customize the install and build command:
Next you need the proper versions of canvas
as well as jsdom
to fix the issue.
Which would be (as listed in the optionalDependency section of fabrics package.json):
canvas@2.8.0
jsdom@19.0.0
,
If you already have both packages installed run yarn upgrade canvas@2.8.0
and yarn upgrade jsdom@19.0.0
.
Or
Delete the node_modules folder and the yarn.lock or package-lock.json.
Then put
"canvas": "2.8.0", "jsdom": "^19.0.0",
in your package.json as dependencies and run a final yarn install
I hope this helps!
Tried all of the answers above, but sadly none work for me. Someone know other methods, please tell me, thanks! I'm deploying either on cyclic or vercel
HI all! I tried all the answers above as well but without luck.
Tried node 14.x and 16.x as these are the only ones available on Vercel. Couldn't try canvas 2.6.1 as it was not downloadable anymore and 2.8.0 gave weird issues during build. I had pnpm first so I thought the paths where different but even moving to npm didn't fix it.
Current setup: Vercel with TurboRepo (monorepo) npm Node: 16.x Canvas: 2.11.0
The build on Vercel works fine. It only gives a runtime error when I make a call to the API that uses canvas:
ERROR Error: /lib64/libz.so.1: version `ZLIB_1.2.9' not found (required by /var/task/node_modules/canvas/build/Release/libpng16.so.16)
at Object.Module._extensions..node (node:internal/modules/cjs/loader:1189:18)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/var/task/node_modules/canvas/lib/bindings.js:3:18)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12) {
code: 'ERR_DLOPEN_FAILED'
}
RequestId: 21e11e06-0cbc-4279-8a0a-40320f9026d0 Error: Runtime exited without providing a reason
Runtime.ExitError
Any help would be welcomed with open arms and a big hug.
If anyone is having this issue on Vercel (for a SvelteKit deployment) another non-code solution would be to setup your env var in your project settings. It's similar to what @FelipeSantos92Dev is suggesting.
Navigate to your project's settings, go to the Environment Variables area. enter
LD_LIBRARY_PATH
for your key and/node_modules/canvas/build/Release
for the value. Click save and create a new build.Note I'm using Node v16.x.x (selectable via your project settings as well)
This worked for me in my sveltekit project, just added LD_LIBRARY_PATH to my vercel env then change it to node 16
If anyone is having this issue on Vercel (for a SvelteKit deployment) another non-code solution would be to setup your env var in your project settings. It's similar to what @FelipeSantos92Dev is suggesting. Navigate to your project's settings, go to the Environment Variables area. enter
LD_LIBRARY_PATH
for your key and/node_modules/canvas/build/Release
for the value. Click save and create a new build. Note I'm using Node v16.x.x (selectable via your project settings as well)This worked for me in my sveltekit project, just added LD_LIBRARY_PATH to my vercel env then change it to node 16
Interesting, I'm using NextJS, maybe that makes it different somehow. Which version of canvas are you using?
@thomasvalera I am using canvas@2.11.0, at first It was failing because vercel is using node 18 as default. When I set the LD_LIBRARY_PATH I started getting GLIBC_2.28 but the downgrade fixed it.
@sevenreup Thanks for the info, unfortunately that didn't work neither.
The issue must lie in the fact that I use it in an api which is a serverless function on Vercel. So the build didn't give me an error but it failed during runtime when I called the api.
I did more digging and found out that the LD_LIBRARY_PATH is updated properly during build but for some reason during runtime specifically on a severless function both changes in next.config.js and in project settings are ignored or overridden by the system. I haven't found a way to change it.
I also tried lazy loading the library inside a function and add the path again right before loading it but that also didn't work, probably too late to have any effect by that point.
EDIT: After now 3 days of trying it all I gave up. I now us https://www.npmjs.com/package/@napi-rs/canvas, works exactly the same and doesn't have a lib issue.
@thomasvalera glad you found a way around it, I also wanted to recommend a Skia-based canvas API.
Same error but none of the solutions worked
Error: /lib64/libz.so.1: version ZLIB_1.2.9" not found (required by /var/task/node_modules/canvas/build/Release/libpng16.so.16)
I am trying to deploy to Amplify. I have tried everything. Has anyone got this to work on amplify? If so can you send your yaml file? Canvas dependency only exists because I am using chartjs-node-canvas
Finally got this working, made a reference repo in case it's helpful to anyone: https://github.com/okwme/serverless-canvas/
I was getting the exact error by deploying a nextjs (13) app together with fabricjs (5.3.0) on vercel (with nodejs 18.).
This is what had worked for me:
- create a vercel-build script in the package.json which looks like this:
"vercel-build": "yum install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel"
Those are the packages wich are mentioned in https://github.com/Automattic/node-canvas as a build requirement.- Next go into the project settings of your vercel project and customize the install and build command:
- Next you need the proper versions of
canvas
as well asjsdom
to fix the issue. Which would be (as listed in the optionalDependency section of fabrics package.json):canvas@2.8.0
jsdom@19.0.0
,If you already have both packages installed run
yarn upgrade canvas@2.8.0
andyarn upgrade jsdom@19.0.0
.Or
Delete the node_modules folder and the yarn.lock or package-lock.json. Then put
"canvas": "2.8.0", "jsdom": "^19.0.0",
in your package.json as dependencies and run a finalyarn install
I hope this helps!
Wow.. this did it for me.. after all the hours trying different solutions, for fabric + vercel, this did it. Thanks so much for sharing this.
I am using Nextjs + fabricjs. This is what worked for me.
uninstall fabricjs
npm i fabric-pure-browser
npm i jsdom
feel free to clone my repo: https://github.com/SyedHammad06/fabricjs.git @jacobdubail How do you alias fabric-pure-browser with next.js? Or did you just update all the imports?
What worked for me was
canvas@2.11.0
node@16
(set on Vercel dashboard)
environment variables (on Vercel dashboard): LD_LIBRARY_PATH=/vercel/path0/node_modules/canvas/build/Release:/var/task/node_modules/canvas/build/Release
Finally got this working, made a reference repo in case it's helpful to anyone: https://github.com/okwme/serverless-canvas/
Thanks @okwme this is what worked for me on my netlify and vercel builds!
If anyone is having this issue on Vercel (for a SvelteKit deployment) another non-code solution would be to setup your env var in your project settings. It's similar to what @FelipeSantos92Dev is suggesting.
Navigate to your project's settings, go to the Environment Variables area. enter
LD_LIBRARY_PATH
for your key and/node_modules/canvas/build/Release
for the value. Click save and create a new build.Note I'm using Node v16.x.x (selectable via your project settings as well)
@jessycormier Thank you very much , its working ♥♥♥
Here is the solution that worked for me don't panic and no need to worry follow the below steps
1) First You need to set the Environment variable for your current Build i) Go to setting --> on left in side menu click on Environment Variables ii) in key field enter the value LD_LIBRARY_PATH and in value field enter the following line
/vercel/path0/node_modules/canvas/build/Release:/var/task/node_modules/canvas/build/Release
iii) Press Save button (you may want to set this environment variable for production, development environment or you can check all values) by default all values will be selected you can go with them
2) If the above steps are completed now you need to downgrade your node version to "16" in Vercel app by default at the time of writing this comment is 18 version you need to downgrade this to 16 simply by following the below steps
i) Click on setting and go to general tab from left side menu ii) Scroll down a bit and you will see Node.js version box you can see the current version if its already 16 redeploy the server or set the version to 16 after redeploying the server your problem will be resolved.
Note: my current version of canvas library is "canvas": "^2.11.0" in my package.json
Enjoy I hope it helps
@TimoA200 solution worked for me in Vercel. I was using Fabric JS, thank you.
I was getting the exact error by deploying a nextjs (13) app together with fabricjs (5.3.0) on vercel (with nodejs 18.).
This is what had worked for me:
- create a vercel-build script in the package.json which looks like this:
"vercel-build": "yum install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel"
Those are the packages wich are mentioned in https://github.com/Automattic/node-canvas as a build requirement.- Next go into the project settings of your vercel project and customize the install and build command:
- Next you need the proper versions of
canvas
as well asjsdom
to fix the issue. Which would be (as listed in the optionalDependency section of fabrics package.json):canvas@2.8.0
jsdom@19.0.0
,If you already have both packages installed run
yarn upgrade canvas@2.8.0
andyarn upgrade jsdom@19.0.0
.Or
Delete the node_modules folder and the yarn.lock or package-lock.json. Then put
"canvas": "2.8.0", "jsdom": "^19.0.0",
in your package.json as dependencies and run a finalyarn install
I hope this helps!
This worked for me on Vercel w/ NextJS using react-konva
& "canvas": "2.8.0". Thanks so much!!
Setting LD_PRELOAD=/var/task/node_modules/canvas/build/Release/libz.so.1
works for me.
@abdullah-live's instructions worked for me (I'm on Vercel). However, i'd like to note that downgrading to Node v16 is onyl a temporary solution because after Feb 2024 Vercel will not let you build new deployments with 16 - you'll be forced to use 18.
If anyone has any suggestions to get it working on Vercel with node 18 - please do share :)
@benjamindell Yes, that's on my mind as well. They (Vercel team) have already issued me a warning about restrictions on the legacy support of Node v16. As of now, it's working for me, but we need to come up with a solution to handle such issues. My current project is secondarily dependent on this library. Right now, I'm not sure about what to do, but I'm hopeful and will find a solution. I will surely update here.
This is (temporary) fixed for mine. (https://www.reddit.com/r/nextjs/comments/13hahc1/having_difficulties_in_deploying_a_nextjs_app)
I was getting the exact error by deploying a nextjs (13) app together with fabricjs (5.3.0) on vercel (with nodejs 18.). This is what had worked for me:
- create a vercel-build script in the package.json which looks like this:
"vercel-build": "yum install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel"
Those are the packages wich are mentioned in https://github.com/Automattic/node-canvas as a build requirement.- Next go into the project settings of your vercel project and customize the install and build command:
- Next you need the proper versions of
canvas
as well asjsdom
to fix the issue. Which would be (as listed in the optionalDependency section of fabrics package.json):canvas@2.8.0
jsdom@19.0.0
,If you already have both packages installed run
yarn upgrade canvas@2.8.0
andyarn upgrade jsdom@19.0.0
. Or Delete the node_modules folder and the yarn.lock or package-lock.json. Then put"canvas": "2.8.0", "jsdom": "^19.0.0",
in your package.json as dependencies and run a finalyarn install
I hope this helps!Wow.. this did it for me.. after all the hours trying different solutions, for fabric + vercel, this did it. Thanks so much for sharing this.
I was getting the exact error by deploying a nextjs (13) app together with fabricjs (5.3.0) on vercel (with nodejs 18.).
This is what had worked for me:
- create a vercel-build script in the package.json which looks like this:
"vercel-build": "yum install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel"
Those are the packages wich are mentioned in https://github.com/Automattic/node-canvas as a build requirement.- Next go into the project settings of your vercel project and customize the install and build command:
- Next you need the proper versions of
canvas
as well asjsdom
to fix the issue. Which would be (as listed in the optionalDependency section of fabrics package.json):canvas@2.8.0
jsdom@19.0.0
,If you already have both packages installed run
yarn upgrade canvas@2.8.0
andyarn upgrade jsdom@19.0.0
.Or
Delete the node_modules folder and the yarn.lock or package-lock.json. Then put
"canvas": "2.8.0", "jsdom": "^19.0.0",
in your package.json as dependencies and run a finalyarn install
I hope this helps!
THIS ALSO WORKED FOR ME THANK YOU SO MUCH!
Where is the Netlify solution? canvas : ^2.11.2, node: v16.20.2 LTS (in Netlify)
Edit:
After 3 days of failure, I realized that Canvas version 2.11.0 is mandatory for Netlify and of course, we have to add LD_LIBRARY_PATH
environment variable in Netlify. The other two options of https://github.com/okwme/serverless-canvas/ are ignorable. Thanks to @okwme
Where is the Netlify solution? canvas : ^2.11.2, node: v16.20.2 LTS (in Netlify) Edit: After 3 days of failure, I realized that Canvas version 2.11.0 is mandatory for Netlify and of course, we have to add
LD_LIBRARY_PATH
environment variable in Netlify. The other two options of https://github.com/okwme/serverless-canvas/ are ignorable. Thanks to @okwme
this answer worked for me too, thanks for linking!
I'm having issue with Error: libpixman-1.so.0: cannot open shared object file: No such file or directory
even with the given solution here. Someone found problems with it?
@thomasvalera I am using canvas@2.11.0, at first It was failing because vercel is using node 18 as default. When I set the LD_LIBRARY_PATH I started getting GLIBC_2.28 but the downgrade fixed it.
Downgrade to what?
I'm using canvas 2.8 and node 16 on vercel and confirm that it works.
Em dom., 22 de out. de 2023 8:43 PM, Neha Rathi @.***> escreveu:
@thomasvalera https://github.com/thomasvalera I am using @.***, at first It was failing because vercel is using node 18 as default. When I set the LD_LIBRARY_PATH I started getting GLIBC_2.28 but the downgrade fixed it.
Downgrade to what?
— Reply to this email directly, view it on GitHub https://github.com/Automattic/node-canvas/issues/1779#issuecomment-1774233767, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACH7OTZYK4SHTT6C4YLNAS3YAWVSZAVCNFSM42MHYDD2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCNZXGQZDGMZXGY3Q . You are receiving this because you commented.Message ID: @.***>
@thomasvalera I am using canvas@2.11.0, at first It was failing because vercel is using node 18 as default. When I set the LD_LIBRARY_PATH I started getting GLIBC_2.28 but the downgrade fixed it.
Downgrade to what?
Downgrade to Node 16
@abdullah-live I successfully replaced canvas
with @napi-rs/canvas and it works on Vercel with Node 18. They are very similar with only some minor differences. You should be able to easily swap between the two packages.
Here is a great example on how to use it.
most of the solutions above require to downgrade to node 16 so we basically have 3 months left until we find a solution for v18
If anyone is coming due to fabric
's depency on canvas
failing to bundle for next.js with Node.js 18 and higher, the following is a solution that worked for me.
Add this to package.json
:
"canvas": "https://registry.yarnpkg.com/@favware/skip-dependency/-/skip-dependency-1.2.1.tgz"
This will simply stub the canvas
dependency with a noop package. So far no issues.
@johncalvinroberts Did you make fabric work with next js 14 app route? Can you please share an example of your configuration? I've been trying almost every solution out there, but nothing seems to work
please, i'm having the same problem with fabricjs and nextjs 14 when I try to deploy on vercel. If someone can do it work, i'd love some help.
Upgrade Nodejs version from v16 to v20 works for me!
you are a NextJS 14? i'm stuck with this error with hours, if you could help me
you are a NextJS 14? i'm stuck with this error with hours, if you could help me
You can try upgrade nodejs version to 20.
Yeah, using NodeJS version 20, worked for me too!!
fabric-pure-browser
Using this? https://www.npmjs.com/package/fabric-pure-browser
If anyone is coming due to
fabric
's depency oncanvas
failing to bundle for next.js with Node.js 18 and higher, the following is a solution that worked for me.Add this to
package.json
:"canvas": "https://registry.yarnpkg.com/@favware/skip-dependency/-/skip-dependency-1.2.1.tgz"
This will simply stub the
canvas
dependency with a noop package. So far no issues.If anyone is coming due to
fabric
's depency oncanvas
failing to bundle for next.js with Node.js 18 and higher, the following is a solution that worked for me.Add this to
package.json
:"canvas": "https://registry.yarnpkg.com/@favware/skip-dependency/-/skip-dependency-1.2.1.tgz"
This will simply stub the
canvas
dependency with a noop package. So far no issues.
Ok this worked now
"dependencies": {
"fabric": "^5.3.0",
"next": "14.0.4",
"react": "^18",
"react-dom": "^18",
"canvas": "https://registry.yarnpkg.com/@favware/skip-dependency/-/skip-dependency-1.2.1.tgz"
},
If anyone is coming due to fabric's depency on canvas failing to bundle for next.js with Node.js 18 and higher, the following is a solution that worked for me. Add this to package.json: "https://registry.yarnpkg.com/@favware/skip-dependency/-/skip-dependency-1.2.1.tgz"
This one worked for me as well using:
- node 18x on Vercel
- next "14.0.4"
- react-konva "^18.2.10"
...after day of struggling to find the solution. It is weird since react-konva is proposing to update the nextConfig
file in order to avoid canvas errors, importing it dynamically as a client component, etc. But if you use it on client side you probably shouldn't bother with installing packages to vercel using yum and similar config, it would just be enough to find some way to ignore canvas build error, right? But for some reason it would still throw the error for canvas like if you're trying to run with SSR.
Hard coding this "canvas": "https://registry.yarnpkg.com/@favware/skip-dependency/-/skip-dependency-1.2.1.tgz"
without any additional config solved the issue for me.
But nevertheless it seems like non of the official docs are actually describing the right solution for the node-canvas issue and how to solve it the right way, It is really strange, since a lot of libs are built on top of it. 🤔 For now this workaround seem to work.
I got it working with vercel after much trial and error using:
Next: latest Canvas: latest Node: 20.x <-- this is crucial, builds take a little longer, but it works!
I've got the same issue running on Vercel我在 Vercel 上运行时遇到同样的问题
Hey bro,Have you solved it?
s": "https://registry.yarnpkg.com/@favware/skip-dependency/-/skip-dependency-1.2.1.tgz"
This one worked for me as well using:
- node 18x on Vercel - next "14.0.4" - react-konva "^18.2.10"
...after day of struggling to find the solution. It is weird since react-konva is proposing to update the
nextConfig
file in order to avoid canvas errors, importing it dynamically as a client component, etc. But if you use it on client side you probably shouldn't bother with installing packages to vercel using yum and similar config, it would just be enough to find some way to ignore canvas build error, right? But for some reason it would still throw the error for canvas like if you're trying to run with SSR.Hard coding this
"canvas": "https://registry.yarnpkg.com/@favware/skip-dependency/-/skip-dependency-1.2.1.tgz"
without any additional config solved the issue for me.But nevertheless it seems like non of the official docs are actually describing the right solution for the node-canvas issue and how to solve it the right way, It is really strange, since a lot of libs are built on top of it. 🤔 For now this workaround seem to work.
@iyhub Have you tried this?
after lots of trial and error and misleading lazy solutions that requires downgrading. I can confirm that Node 20 on vercel which is beta work with me unlike 18 and 16 which is almost expired. so the following specs on a working deployment are:
node: 20
canvas: 2.8.0
and I included the following to the top of the next config file
if ( process.env.LD_LIBRARY_PATH == null || !process.env.LD_LIBRARY_PATH.includes(
${process.env.PWD}/node_modules/canvas/build/Release: ) ) { process.env.LD_LIBRARY_PATH =
${
process.env.PWD
}/node_modules/canvas/build/Release:${process.env.LD_LIBRARY_PATH || ""}; }
Hope this was helpful. If anyone faces error after duplicating same configs. comment and ill see what can I do. I am jobless just like every other developer and free to help
https://github.com/orgs/vercel/discussions/3061#discussioncomment-7599429
Thank you very much! This worked for me on:
{
"next": "14.1.4"
"fabric": "^5.3.0"
}
In brief, if you're looking for a quick summary: navigate to your project settings on Vercel, locate the General section, switch the Node.js Version from 18.x to 20.x, rebuild your project, and that's all it takes!
When running on AWS Lambda using Node 14 with Canvas v2.7.0 I am seeing the following error:
Error: /lib64/libz.so.1: version `ZLIB_1.2.9' not found (required by /opt/nodejs/node_modules/canvas/build/Release/libpng16.so.16)
I am successfully running on Node 14 using Canvas v2.6.1, but wanted to upgrade. This library is a dependency of ChartjsNodeCanvas which is ultimately what I am calling.
Thanks.