ionic-team / capacitor-assets

Local Capacitor icon/splash screen resource generation tool
MIT License
504 stars 99 forks source link

npm install @capacitor/assets Apple M1 fails #473

Open marshall86 opened 1 year ago

marshall86 commented 1 year ago

Hi, I'm trying to install the capacitor assets on my Mac Mini M1 but unfortunately I get this error:

npm ERR! code 1 npm ERR! path /node_modules/@capacitor/assets/node_modules/sharp npm ERR! command failed npm ERR! command sh -c (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy) npm ERR! sharp: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.12.2/libvips-8.12.2-darwin-arm64v8.tar.br npm ERR! internal/fs/utils.js:332 npm ERR! throw err; npm ERR! ^ npm ERR! npm ERR! Error: EACCES: permission denied, copyfile '/var/folders/px/4ddgk5bs1y9_f5qfhgdx3_140000gn/T/4481-libvips-8.12.2-darwin-arm64v8.tar.br' -> '/../.npm/_libvips/libvips-8.12.2-darwin-arm64v8.tar.br' npm ERR! at Object.copyFileSync (fs.js:2062:3) npm ERR! at WriteStream.<anonymous> (/../node_modules/@capacitor/assets/node_modules/sharp/install/libvips.js:204:20) npm ERR! at WriteStream.emit (events.js:400:28) npm ERR! at emitCloseNT (internal/streams/destroy.js:87:10) npm ERR! at processTicksAndRejections (internal/process/task_queues.js:81:21) { npm ERR! errno: -13, npm ERR! syscall: 'copyfile', npm ERR! code: 'EACCES', npm ERR! path: '/var/folders/px/4ddgk5bs1y9_f5qfhgdx3_140000gn/T/4481-libvips-8.12.2-darwin-arm64v8.tar.br', npm ERR! dest: '/.../npm/_libvips/libvips-8.12.2-darwin-arm64v8.tar.br' npm ERR! }

Angular CLI: 14.2.10 Node: 14.20.0 Package Manager: npm 7.20.5 OS: darwin arm64 Ionic 6.3.7 Capacitor: 4.6.1

Thanks in advance for your support.

Saqib92 commented 1 year ago

facing same issue.

mlynch commented 1 year ago

Hmm, just tried this and it's working fine for me. Can you try Node 16 and npm 8.18? Also are you installing it globally or using npx to invoke it locally?

marshall86 commented 1 year ago

same thing unfortunately..

Saqib92 commented 1 year ago

issue with npx:

fahadaslam@Fahads-Mac-mini a2g % npx capacitor-assets generate      
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/capacitor-assets - Not found
npm ERR! 404 
npm ERR! 404  'capacitor-assets@*' is not in this registry.
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/fahadaslam/.npm/_logs/2023-01-20T09_38_54_948Z-debug-0.log

Node and npm Info:

fahadaslam@Fahads-Mac-mini a2g % node -v
v16.13.1
fahadaslam@Fahads-Mac-mini a2g % npm -v
9.3.1
fahadaslam@Fahads-Mac-mini a2g %

UPDATE:

After installing with npm i @capacitor/assets. npx command works. But generated icons and splash screens are not correct. specially Splash screens showing black background and actual image is in centre.

Screenshot 2023-01-20 at 2 58 41 PM

dtarnawsky commented 1 year ago

@marshall86,

The problem is likely related to a previously installed version of cordova-res or @capacitor/assets. To resolve this: cd /users/[your-user]/.npm rm -rf _libvips

You may need to run sudo rm -rf _libvips to remove the folder if your user does not have permission.

Try again, if it still doesn't work then: brew uninstall vips brew install vips

@Saqib92, your issue is likely missing the colors when running the tool in easy mode. Read the doc and be sure to specify the colors. If you still have an issue then it would be a new issue and not related to installation on a M1.

marshall86 commented 1 year ago

the mac is brand new, there is no previous installation of cordova-res or capacitor assets..

dtarnawsky commented 1 year ago

Hey @marshall86 ,

The error is: Error: EACCES: permission denied, copyfile '/var/folders/px/4ddgk5bs1y9_f5qfhgdx3_140000gn/T/4481-libvips-8.12.2-darwin-arm64v8.tar.br' -> '/../.npm/_libvips/libvips-8.12.2-darwin-arm64v8.tar.br'

To fix that delete the _libvips folder located in .npm . It can then copy to that folder. This is the reason for running: cd /users/[your-user]/.npm rm -rf _libvips

hexianggui commented 1 year ago

same thing unfortunately..

I used @capacitor/cli version 4.7.0 windows system

use: yarn @capacitor/assets --dev error:

:error D:\work\MesMultiplatformApp\mesMulpApp\node_modules\sharp: Command failed.
Exit code: 1
Command: (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)
Arguments:
Directory: D:\work\MesMultiplatformApp\mesMulpApp\node_modules\sharp
Output:

use: npm install --save-dev @capacitor/assets

up to date, audited 1502 packages in 4s

162 packages are looking for funding
  run `npm fund` for details

3 high severity vulnerabilities

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

use:npm audit fix

# npm audit report
xml2js  <0.5.0
Severity: high
xml2js is vulnerable to prototype pollution  - https://github.com/advisories/GHSA-776f-qx25-q3cc
node_modules/xml2js
  @capacitor/cli  *
  Depends on vulnerable versions of xml2js
  node_modules/@capacitor/assets/node_modules/@capacitor/cli
  node_modules/@capacitor/cli
    @capacitor/assets  *
    Depends on vulnerable versions of @capacitor/cli
    node_modules/@capacitor/assets

3 high severity vulnerabilities

Some issues need review, and may require choosing