ivansevillaa / use-next-blurhash

A custom hook that from a blurhash string will give you a blurDataUrl to add to your dynamics image in nextjs getting so a better user experience.
MIT License
78 stars 6 forks source link

[Solved] Vercel Deployment Error (version `ZLIB_1.2.9' not found) #4

Closed brunos3d closed 2 years ago

brunos3d commented 2 years ago

This is an issue report for solving common issues.

I created an example project to demonstrate the use of the hook for projects deployed in Vercel.

https://github.com/BrunoS3D/use-next-blurhash-hook-example https://use-next-blurhash.vercel.app/

You have possibly run into this error when implementing the hook

image

You can solve it by simply adding this code snippet to your next.config.js file as shown here

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 || ''}`;
}

Ref to original solution https://github.com/Automattic/node-canvas/issues/1779#issuecomment-895885846

Another similar error that doesn't show as many details can also be solved using the solution above:

image

NOTE: @ivansevillaa, if possible, leave this issue fixed for other people to find a solution for similar issues

ivansevillaa commented 2 years ago

Thank you so much @BrunoS3D, this will be so helpful. I also will add this to the README.

rlods commented 1 year ago

To solve the issue with last version of Vercel and canvas:

in package.json

"scripts": {
    "build": "./setup.sh && next build"
 }

and create setup.sh

yum install wget

wget https://github.com/NixOS/patchelf/archive/refs/tags/0.17.0.tar.gz
tar -xf 0.17.0.tar.gz
cd patchelf-0.17.0
./bootstrap.sh
./configure
make
make install
cd ..

wget https://zlib.net/fossils/zlib-1.2.9.tar.gz
tar -xf zlib-1.2.9.tar.gz
cd zlib-1.2.9
sh configure
make
cp libz.so.1.2.9 ../node_modules/canvas/build/Release/libz.so.X
cd ..

patchelf --replace-needed /lib64/libz.so.1 libz.so.X ./node_modules/canvas/build/Release/libpng16.so.16
patchelf --replace-needed libz.so.1 libz.so.X ./node_modules/canvas/build/Release/libpng16.so.16
thebishalniroula commented 1 year ago

@rlods I tried your solution but the deployment still fails with following error. /bin/sh: ./setup.sh: Permission denied Can you please help me solve it?

AryanJ-NYC commented 1 year ago

@rlods I tried your solution but the deployment still fails with following error. /bin/sh: ./setup.sh: Permission denied Can you please help me solve it?

https://askubuntu.com/questions/409025/permission-denied-when-running-sh-scripts

AryanJ-NYC commented 1 year ago

To solve the issue with last version of Vercel and canvas:

in package.json

"scripts": {
    "build": "./setup.sh && next build"
 }

and create setup.sh

yum install wget

wget https://github.com/NixOS/patchelf/archive/refs/tags/0.17.0.tar.gz
tar -xf 0.17.0.tar.gz
cd patchelf-0.17.0
./bootstrap.sh
./configure
make
make install
cd ..

wget https://zlib.net/fossils/zlib-1.2.9.tar.gz
tar -xf zlib-1.2.9.tar.gz
cd zlib-1.2.9
sh configure
make
cp libz.so.1.2.9 ../node_modules/canvas/build/Release/libz.so.X
cd ..

patchelf --replace-needed /lib64/libz.so.1 libz.so.X ./node_modules/canvas/build/Release/libpng16.so.16
patchelf --replace-needed libz.so.1 libz.so.X ./node_modules/canvas/build/Release/libpng16.so.16

I tried this solution but get a no space left on device, write error.

sladg commented 1 year ago

Thanks @rlods it fixed build for me. Had problem with fabric missing ZLIB

bhartisharmawebllisto commented 1 year ago

This is an issue report for solving common issues.

I created an example project to demonstrate the use of the hook for projects deployed in Vercel.

https://github.com/BrunoS3D/use-next-blurhash-hook-example https://use-next-blurhash.vercel.app/

You have possibly run into this error when implementing the hook

image

You can solve it by simply adding this code snippet to your next.config.js file as shown here

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 || ''}`;
}

Ref to original solution Automattic/node-canvas#1779 (comment)

Another similar error that doesn't show as many details can also be solved using the solution above:

image

NOTE: @ivansevillaa, if possible, leave this issue fixed for other people to find a solution for similar issues

But I am not sure which path will come here process.env.LD_LIBRARY_PATH and process.env.PWD

klinsc commented 1 year ago

This is (temporary) fixed for mine. (https://www.reddit.com/r/nextjs/comments/13hahc1/having_difficulties_in_deploying_a_nextjs_app)

sladg commented 1 year ago

I opted into using

<Script
  src="/assets/fabric.min.js"
  onError={(e) => console.error('Error loading fabric.js', e)}
  onReady={() => setIsReady(true)}
/>

and I got the minified JS file from http://fabricjs.com/build/ and removed NPM dependency all together.

Component is call as

const Canvas = dynamic(
  () => import('./Canvas').then((a) => a.Canvas),
  { ssr: false }
)
Dalorzo commented 1 year ago

@rlods I tried your solution but the deployment still fails with following error. /bin/sh: ./setup.sh: Permission denied Can you please help me solve it?

Try this chmod u+r+x setup.sh && ./setup.sh && next build

yafkari commented 10 months ago

In my case I got the issue because I upgraded node from 18.16.x to 20.10.x but didn't change the node version in my vercel project settings.

Changing the version there and trigger a deploy fixed the issue.

saike commented 7 months ago

@yafkari works like a charm. Thank you!

alekspetrov commented 7 months ago

Change Node version to 20x on Vercel soled this issue for me.

TharindaPrabhath commented 6 months ago

Change Node version to 20x on Vercel soled this issue for me.

This worked for me. Thank you!

yaozakai commented 6 months ago

I tried every possible solution here and I still have the same issue:

⨯ Error: /lib64/libz.so.1: versionZLIB_1.2.9' not found (required by /var/task/node_modules/canvas/build/Release/libpng16.so.16)`

adenekan41 commented 5 months ago

https://github.com/Automattic/node-canvas/issues/1779#issuecomment-2027970343

This worked for me

{ "next": "13.5.6" "fabric": "^5.3.0" }

I just updated the Node.js Version from 18.x to 20.x, and redeployed. That did it for me.

EragonJ commented 5 months ago

After testing all the combinations on Vercel, this is finally something that is working for me - no dep on nextjs, but using @vercel/node directly:

  1. Upgrade Canvas to 2.11.2+ (which supports node 20+)
{
  "canvas": "2.11.2"
}
  1. Change the Vercel node version from 16.x to 20.x
  2. Remove LD_LIBRARY_PATH env variable from the settings on Vercel (If I don't remove this one, the node: /var/task/node_modules/canvas/build/Release/libstdc++.so.6: version GLIBCXX_3.4.26' not found (required by node) error would show up)

Please give it a try if you also have the same issue on Vercel!