javascript - I can't create react apps! canvas related issues

Question

My laptop is M1 macbook pro. The node version is 15.4.1. The npm version is 7.0.15.

After I used this cmd npx create-react-app my-app, it returned this:

I've tried a lot, but always got the same issue. I think the problem is with "canvas". But I have no idea how to solve it.

Thanks a lot!

Answer 1

It seems that the installer need to find head files of some dependencies in /usr/local/include/, but the head files of dependencies installed by arm brew is in /opt/homebrew/include and the installer can't find them.

One solution is reinstalling brew under Rosetta 2, then installing related dependencies (pkg-config cairo, libpng, jpeg, giflib, pango).

Another solution is creating symbolic link in /usr/local/include/ linking to related head files in /opt/homebrew/include (For example, sudo ln -s /opt/homebrew/include/jpeglib.h /usr/local/include/jpeglib.h) (I don't think it's an elegant solution but at least it works).

(I also install xcode but I'm not sure whether it has something to do with this problem.)