how to install node js canvas on windows - javascript

I'm trying to get working canvas on node js. I'm using Windows Vista. After basic approach npm install canvas failed (see error below), I have looked up some tutorials, here is what I have tried:
sources:
installing-node-canvas-for-windows
LearnBoost/node-canvas/wiki/Installation---Windows
I have installed older Python (2.7.5) and add it to PATH (and remove Python 3.2. from PATH)
I have checked that I do have Microsoft Visual Studio 2010 Professional installed
I have downloaded the 'all in one' GTK package from http://ftp.gnome.org/pub/gnome/binaries/win32/gtk+/2.24/gtk+-bundle_2.24.10-20120208_win32.zip, unziped it in C:\GTK\ and add 'C:\GTK\bin' to PATH
log in console (after running npm install canvas in cmd):
log contains several warnings, I don't thing these are the problem - it is mostly something like 'conversion from double to float', and one error marked in red color:
init.cc
d:\pathToApp\node_modules\canvas\src\PNG.h(5): fatal error C1083: Cannot
open include file: 'cairo.h': No such file or directory [d:\pathToApp\n
ode_modules\canvas\build\canvas.vcxproj]
And at the very end of log there is:
gyp ERR! build error
gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe
` failed with exit code: 1
gyp ERR! stack at ChildProcess.onExit (C:\Program Files\nodejs\node_modules\
npm\node_modules\node-gyp\lib\build.js:267:23)
gyp ERR! stack at ChildProcess.EventEmitter.emit (events.js:98:17)
gyp ERR! stack at Process.ChildProcess._handle.onexit (child_process.js:789:
12)
gyp ERR! System Windows_NT 6.0.6002
gyp ERR! command "node" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modu
les\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd d:\pathToApp\node_modules\canvas
gyp ERR! node -v v0.10.16
gyp ERR! node-gyp -v v0.10.9
gyp ERR! not ok
npm ERR! weird error 1
npm ERR! not ok code 0
After that, nothing appeared in node-module folder (no canvas subdirectory, npm after unsuccessful installation removed the subdirectory).
So I have also tried to download canvas module manually from github, unzip it in node-modules and then run node-gyp configure in node-modules/canvas with success, and node-gyp build, which unfortunatelly gave me the same error Cannot open include file: 'cairo.h'.
I have read everything that I found on this carefully. If you can suggest any help, please do it.

I have managed to get it working on my new Windows 8 machine, so I want to share some details that can be helpful to others.
I am using:
Windows 8.1 (64 bit)
Visual Studio 2013 (update 2)
Python 2.7.8
GTK for Windows 64 bit (http://www.gtk.org/download/win64.php)
node 0.10.28
node-gyp 1.0.1
Procedure
Be sure to have Python 2 and GTK\bin in your path.
I have downloaded files manualy from https://github.com/Automattic/node-canvas and saved it to node_modules/canvas.
Then I run node-gyp configure build in canvas directory. Errors occured. I had to edit binding.gyp (https://github.com/Automattic/node-canvas/blob/master/binding.gyp) in order to match actual files in GTK folder.
For example:
line 59: "(GTK_Root)/lib/libpng.lib" -> "(GTK_Root)/lib/libpng.dll.a"
line 34: "(GTK_Root)/bin/libpng14-14.dll" -> "(GTK_Root)/bin/libpng15-15.dll"
...
There can be more, you should be able to read which files are making problems from error log and then edit the names to match files in GTK folder.
After editing binding.gyp, command node-gyp configure build finished successfuly. Although I am not able to work with some jpg files in Canvas (I have not tested it properly), png files work fine.
If node-gyp fails
It can happen to you, that every node-gyp command fails with message (possibly marked in red) similar to:
"...bcrypt_lib.vcxproj(47,46): error MSB4025: Could not load file project. An invalid character for the specified encoding., Line 47, position 46."
It it most probably because you have special character in the name of your user folder. (The fact, that Windows 8 automatically creates the name of your user folder from your first name is the lamest thing about Win 8).
2 quick solutions:
create another user with normal (without special characters) name a and run node-gyp configure build from that account
use this quick fix (it has worked for me): https://github.com/TooTallNate/node-gyp/pull/366
Hope this helps.

I managed to get this working on windows after a long arduous process. I have a last couple of suggestions that you might try that I had on my list.
Copy all the dll files from c:\GTK to the canvas\build\Release folder.
Copy IEShims.dll from c:\program files(x86)\Internet Explorer to the canvas\build\Release folder.
Then run node-gyp build.
Best of luck.

I ran into trouble with canvas while trying to install paperjs.
Here's what worked for me.
My specifics
Windows 7 x64
node-v0.10.26-x64
GTK+ 2.22 x64
GTK
Make sure you read the README. There are necessary instructions here that I overlooked the first time around. For instance:
Run: pkg-config --cflags gtk+-2.0
Run: gtk-demo and verify that it works
Running pkg-config let me know that I needed to have <GTK Directory>\lib\pkgconfig in the PKG_CONFIG_PATH environment variable.
canvas
I used this as a guide:
https://github.com/LearnBoost/node-canvas/wiki/Installation---Windows
NOTE: I have Visual Studio 2010, 2012 and 2013 installed on my machine, so I didn't have to deal with MSVC dependencies.
npm install canvas was always failing - and cleaning up after itself (the jerk) - so I grabbed the cached version from the npm-cache:
%USERPROFILE%\AppData\Roaming\npm-cache\canvas\1.1.3\package. Copy this directory to your project's node_modules directory and rename it canvas. Enter the newly created canvas directory on the command line.
Run npm install nan.
Before you you can run node-gyp configure successfully, you need to verify your GTK path in binding.gyp
On line 5:
'GTK_Root%': 'C:/GTK', # Set the location of GTK all-in-one bundle
Now you can try node-gyp configure. If this is successful, awesome!
Now you can build it: node-gyp build.
That should do it. If you were trying to install paper, now you can. Hooray!
If this doesn't work, or you have something to add, don't be shy! Please comment so we can all benefit.

You will need cairo library which is bundled in GTK

Here is the most up-to-date information I've found on how to install the components required to run node-gyp which is in turn required to compile the code for canvas (and jsdom). I'm going to replicate it here in case the link dies. I have tested these instructions on my Win7 x64 machine and it worked first time.
On Windows XP/Vista/7, node-gyp requires Python 2.7 and Visual Studio 2010
According to the readme file in Microsoft Visual C++ 2010 Service Pack 1 Compiler Update for the Windows SDK 7.1, to ensure that your system has a supported configuration, uninstall the following products and then reinstall them in the order listed:
Visual Studio 2010
Windows SDK 7.1 Note: If you get error on installation, maybe this link will help you.
Visual Studio 2010 SP1
Visual C++ 2010 SP1 Compiler Update for the Windows SDK 7.1
On x64 environments, the last update in the list fixes errors about missing compilers and error MSB4019: The imported project "C:\Microsoft.Cpp.Default.props" was not found.

Related

NPM can't be install because of GYP ERR with Node v16

Hello guys I am having the following problem, I am having project that I have to run but when I try to install npm it fails whit this log see the log from webstorm here The version of node is 16.14.1, npm is 6.19.3, node-gyp is 8.4.1
Have you encounter that issue before?
If I downgrade to node v14 it passes but the pipeline files because of docker image of node that is 16 and also different errors on local start to appear because of prettier.
I have researched all of the issues regarding gyp but havent found a solution to my problem, deleted node and all of it's cache but still the same issue.
There seems versions for node and node-gyp are incompatible. Can you try using the latest node-gyp version i.e 9.3.1? Hopefully this will resolve your issue.

error when installing windows-build-tools and nodejsv 18.0.0

With python2.7 and buildtools installed manually. Python is in the path
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2.7" in the PATH
https://pastebin.com/YseQXVE4
It isn't recommended to install windows-build-tools, as it is deprecated, and there are build tools from the Node.js installer.
To install it, follow the steps below.
Head to nodejs.org, and download and run the LTS installer.
On the page where it asks you about installing the build tools, check the box.
When the installation has concluded, a PowerShell window will open and run the commands to install the tools.
EDIT: According to LeMIT's comment,
A complete uninstallation of Node.js, Python, and Visual Studio (including a registry cleanup) helped me.
This should install the build tools.
Python 2.7
Visual Studio 20--

Integrate npm into VisualStudio

I got Linux. I have just installed Visual Studio and installed npm with it. However, when I type "npm init -y" into the Visual Studio console it says npm command not found. In the normal console I type npm version and it gives me back the version 3.5.2 though. So apparently I have not really integrated it into Visual Studio. Does anyone how to do so?
I had the same problem before... if you want to run npm commands you should go to a directory that your nodejs is installed... if you want to run npm commands in other directories you should go to the directory that you want and then run cmd and type in the commant
set path=C:\Program Files\nodejs\
then you can run all of the npm commands in your directory

Unable to run Electron Quick Start in WSL

Hi I'm running Ubuntu 16.04.3 LTS on Windows Subsystem Linux. I'm trying to run the Quick Start first app as listed in this section here https://electronjs.org/docs/tutorial/first-app however, I keep getting the same error no matter if I clone the repository, write it myself, or delete and reinstall the Electron module.
> electron .
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! first-electron#1.0.0 start: `electron .`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the first-electron#1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
For reference I'm running
Node: 9.11.1
NPM: 5.8.0
Electron needs to open a chrome browser window. So, when you run it from WSL using a node.js that was installed in WSL, I guess it would try to start the chromium browser for Ubuntu, which will not work out of the box, because:
Microsoft doesn't support graphical programs on WSL. Bash on WSL is intended for running command-line programs that developers might need, but it's possible to run graphical Linux desktop programs on Windows using the Bash shell. To be more precise, you'll be able to display graphical programs running in WSL on a Windows 10 desktop by using an X server which runs on Windows 10.
https://virtualizationreview.com/articles/2017/02/08/graphical-programs-on-windows-subsystem-on-linux.aspx
I found the easiest way is to install electron on Windows then start it from WSL.
Steps:
Make sure you have Node.js & npm installed on your Windows machine (you can remove them afterwards)
Open cmd.exe, move to your project directory and run npm install electron --save-dev.
This will install the Windows version of the prebuilt Electron binary instead of the Linux one, which would occur if you try to install from WSL. (This is the actual trick)
Enter Bash on Ubuntu on Windows, move to your project directory then run ./node_modules/.bin/electron (or use an npm script) to launch your Electron app
Though, I'm not sure this is very convenient, it seems to work well.
I hope this will help people encoutering the same issue in the future!
Ref: https://github.com/electron-userland/electron-prebuilt/issues/260
run a X-server app in windows, then export DISPLAY , run the npm start.

Node.js imagemin on CentOS

I am trying to use Node.js imagemin to compress a lot of images on my server. I like using imagemin because I know how to point it at specific directories.
I am using CentOS 6 and when I run my file, I get the error:
node_modules/imagemin/node_modules/imagemin-pngquant/node_modules/pngquant-bin/vendor/pngquant: /lib64/libc.so.6: version `GLIBC_2.14' not found
Also, when I installed imagemin with npm install imagemin, I got an error that said:
Error: pngquant failed to build, make sure that libpng-dev is installed
Any ideas on what I can do to solve this?
(Problem de facto already solved in the comments - but for the sake of completion and future generations I'm posting an actual answer).
Error: pngquant failed to build, make sure that libpng-dev is installed
This error means that the system is lacking libpng development library, which is needed to install imagemin Node.JS module. To install it on CentOS 6, you need to issue this command:
yum install libpng-devel
Please note that both package manager (here - yum) and package name (libpng-devel) can vary between different Linux distributions.
I had the same issue with CentOS 7 even with libpng-devel installed. It seems the package carries a precompiled binary program in node_modules/pngquant-bin/vendor/pngquant which is somehow incompatible with the Linux installation (CentOS 7 latest).
I have made a solution to the problem by replacing this binary file with the one that is available for CentOS 7.
I am installing the official package pngquant with yum, first. Then I am installing the node modules. You can remove the node_modules folder if you like prior to install action. Its not required, though.
The error will be shown as usual (the program file is not yet replaced):
⚠ The `node_modules/pngquant-bin/vendor/pngquant` binary doesn't seem to work correctly
⚠ pngquant pre-build test failed
ℹ compiling from source
✖ Error: pngquant failed to build, make sure that libpng-dev is installed
at ChildProcess.exithandler (child_process.js:206:12)
at emitTwo (events.js:106:13)
at ChildProcess.emit (events.js:191:7)
at maybeClose (internal/child_process.js:877:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
However, after replacing the binary file everything should be fine.
sh
yum install libpng-devel pngquant
npm install
rm -rf node_modules/pngquant-bin/vendor/pngquant
ln -s /usr/bin/pngquant node_modules/pngquant-bin/vendor/pngquant
After that you can run any command you like, "imagemin:dynamic", etc. It should work properly.
Summary
Generally speaking, the problem appear to be inside the pngquant-bin node package. This solution might help for other Linux distributions as well.
The solution itself is to install the officially supported version of pngquant with the OS package manager and to replace the binary inside the pngquant-bin vendor folder after its installation.
Update
In addition, there is a recent problem that is still related with pngquant npm package. It seems that there is a buggy release of it - lock the required pngquant package in your package.json to older version (last properly running version for you).
The previous solutions didn't work for me. I'm using centos 7.4
When executing executing
# npm install
I recieved the error:
✖ Error: pngquant failed to build, make sure that libpng-dev is installed`
While trying to install libpng-devel, it says it's already installed.
Solution
Update the nodejs & npm version if it's using old one.
I have updated to
Nodejs Version
[root#hosting ~]# node -v
v8.10.0
npm version
[root#hosting ~]# npm -v
5.7.1
Check the installed libpng-devel on your server.
[root#hosting ~]# rpm -qa |grep libpng
libpng-1.5.13-7.el7_2.x86_64
libpng-devel-1.5.13-7.el7_2.x86_64
If you are using epel repo then it will install the latest version. For more libpng release check
[root#hosting ~]# yum list |grep libpng
I have installed
yum install libpng12-1.2.50-10.el7.x86_64 libpng12-devel-1.2.50-10.el7.x86_64
moved node modules
mv node_modules node_modules_bak
Then type
# npm install
in my case, I'm using a CentOS instance on Amazon WS and I faced same problem here. I solved it by installing libpng12 and libpng12-devel (yum install libpng12 libpng12-devel), then running yarn install (or npm install) and the packages did installed correctly.
Just this!
Here's how I resolved the issue for my case:
Delete node_modules:
rm -rf node_modules
Install following dependencies:
sudo dnf install libpng-devel pngquant gcc make libpng12 libpng12-devel
Rebuild dependencies. I use yarn:
yarn

Categories

Resources