Gridsome: Installation Issue

[ElliotPsyIT]

Great sounding project! I tried installing a site, but ran aground. I'm hopeful you can help debug or point out any silly error I'm making inadvertently.

I successfully installed the @gridsome/cli globally, as below. But then when creating a new site, the process failed and printed a simple 'undefined' in red. Not sure how to start debugging this, so I filed an issue.

Thanks for your attention.

MacBook-Pro:vue$ sudo npm install --global @gridsome/cli
/Users/xxxx/.nvm/versions/node/v9.6.0/bin/gridsome -> /Users/xxxx/.nvm/versions/node/v9.6.0/lib/node_modules/@gridsome/cli/bin/gridsome.js
+ @gridsome/[email protected]
added 55 packages in 2.637s

MacBook-Pro:vue$ gridsome create my-gridsome-site
❯ Clone https://github.com/gridsome/gridsome-starter-default.git 0.52s
❯ Update project package.json 0s
❯ Install dependencies
  • Building fresh packages (4 of 4)

undefined

[hjvedvik]

You are not doing anything wrong here :) But there is an issue when the dependencies are installed sometimes that I have to debug. I think you can enter the my-gridsome-site folder and run gridsome develop anyway. Or run yarn yourself in my-gridsome-site just to make sure all dependencies was installed.

[ElliotPsyIT]

Yes, I proceeded to install the app directly in my-gridsome-site using npm. I completed the installation and have gridsome develop up and running. However, I have a remaining issue with image processing errors.

In getting gridsome develop running, I encountered a specific permission issue and an issue installing the sharp image processing package. I've outlined the issues and how I addressed them below, with the caution that this is still a work in progress on my system and may not be the best way for others to proceed ...

For reference, my system:
MacOS Sierra 10.12
Node v.8.12.0
NPM v.5.6.0

After running sudo npm install I hit this permissions error below. This has to do with using sudo, and it can be resolved using an npm flag sudo npm install --unsafe-perm for npm to run as the root account. That may be solving one issue and causing another, I'm not sure, since I have image processing errors on the working app.

> [email protected] install /Users/xxxx/vue/my-gridsome-site/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Using cached /Users/xxxx/.npm/_libvips/libvips-8.6.1-darwin-x64.tar.gz
ERR! sharp EACCES: permission denied, mkdir '/Users/xxxx/vue/my-gridsome-site/node_modules/sharp/vendor'
ERR! sharp Please see http://sharp.pixelplumbing.com/page/install
gyp ERR! configure error
gyp ERR! stack Error: EACCES: permission denied, mkdir '/Users/jaisina/vue/my-gridsome-site/node_modules/sharp/build'
gyp ERR! System Darwin 16.0.0
gyp ERR! command "/Users/xxxx/.nvm/versions/node/v8.12.0/bin/node" "/Users/xxxx/.nvm/versions/node/v8.12.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/xxxx/vue/my-gridsome-site/node_modules/sharp
gyp ERR! node -v v8.12.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `(node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.

Another iteration of install hit this issue below. Sharp has binaries for Node v.6, v.8 and v.10, but I couldn't get those to install. Sharp is trying to compile and fails because it needs a C compiler, which is available in the xcode developer tools. In most cases this is as easy as running xcode-select --install on your mac. This shows the successful compilation. (I haven't yet explored the vulnerabilities revealed ...)

> [email protected] install /Users/jaisina/vue/my-gridsome-site/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Using cached /Users/jaisina/.npm/_libvips/libvips-8.7.0-darwin-x64.tar.gz
prebuild-install WARN install EISDIR: illegal operation on a directory, open '/Users/jaisina/vue/my-gridsome-site/node_modules/sharp/build/Release'
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!

Now re-running, and the Sharp compilation and install succeeds, as below.

> [email protected] install /Users/jaisina/vue/my-gridsome-site/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Using cached /Users/jaisina/.npm/_libvips/libvips-8.6.1-darwin-x64.tar.gz
prebuild-install WARN install EISDIR: illegal operation on a directory, open '/Users/jaisina/vue/my-gridsome-site/node_modules/sharp/build/Release'
  TOUCH Release/obj.target/libvips-cpp.stamp
  CXX(target) Release/obj.target/sharp/src/common.o
  CXX(target) Release/obj.target/sharp/src/metadata.o
  CXX(target) Release/obj.target/sharp/src/stats.o
  CXX(target) Release/obj.target/sharp/src/operations.o
  CXX(target) Release/obj.target/sharp/src/pipeline.o
  CXX(target) Release/obj.target/sharp/src/sharp.o
  CXX(target) Release/obj.target/sharp/src/utilities.o
  SOLINK_MODULE(target) Release/sharp.node
added 42 packages from 81 contributors and audited 18181 packages in 21.915s
found 5 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

Running gridsome develop yields a new permissions problem that seems to be related to my setup.

Aartis-MacBook-Pro:my-gridsome-site fielstem$ gridsome develop
Gridsome v0.1.2
CPU Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz (4 cores)

Bootstrapping...
Initialize - 0.1s
Run plugins - 0.06s
Create GraphQL schema - 0.01s

Error: EACCESS: permission denied, mkdir '/Users/xxxx/vue/my-gridsome-site/src/.temp'

Given my system, running sudo gridsome develop is necessary to get up and running.

Gridsome v0.1.2
CPU Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz (4 cores)

Bootstrapping...
Initialize - 0.1s
Run plugins - 0.06s
Create GraphQL schema - 0.01s
Generate temporary files - 0.02s
Bootstrap finish - 0.2s
                                                                              S   Site running at:          http://localhost:8080
  Explore GraphQL data at:  http://localhost:8080/___explore

I have a running app, but the image on the main page shows an error. And the server shows this error.

    at Process.ChildProcess._handle.onexit (internal/child_process.js:190:19)
    at onErrorNT (internal/child_process.js:362:16)
    at _combinedTickCallback (internal/process/next_tick.js:139:11)
    at process._tickCallback (internal/process/next_tick.js:181:9)

Looks like a node spawn/exec issue that might be related to running as root under sudo. This is possibly caused by the my installation decisions that might need to be reviewed. I'm still exploring this, and welcome any insights.

[ekoeryanto]

I have a weirdo that says the directory already exists

PS O:\Repository> gridsome create gridsome-site
Directory «gridsome-site» already exists.
PS O:\Repository>
PS O:\Repository>
PS O:\Repository>
PS O:\Repository>

[ElliotPsyIT]

@ekoeryanto Any chance you ran the gridsome create command more than once?

[hjvedvik]

Hi @ElliotPsyIT, did you manage to get it working? Maybe running the create command as sudo will help. Mixing sudo and non-sudo commands will probably cause permission issues.

[ekoeryanto]

@ElliotPsyIT I ran that only once.

[ElliotPsyIT]

Hi @hjvedvik - Yes, I had done just as you suggest - using sudo with the create command. Then after doing so, invoking develop also using sudo started the server with no errors and no issues with sharp. I've begun digging further into the project. Thanks!

[ElliotPsyIT]

@ekoeryanto - So, to be clear you simply took these two steps - installed the gridsome cli tool globally and then ran the create command - and got the directory already exists message?

1. Install Gridsome CLI tool
npm install --global @gridsome/cli

2. Create a Gridsome project
gridsome create my-gridsome-site to create a new project

[ekoeryanto]

@ElliotPsyIT, yes.

Update: I rerun the command and it is just work with success. Maybe something wrong with my environment (keyboard or touchpad that repeated the command)

[ElliotPsyIT]

@ekoeryanto I reviewed the CLI code and couldn't see a way of creating the project dir twice without multiple runs. Glad you got it worked out!

[secondary-school55]

I think it is good to make sharp as external plugin (gridsome-plugin-sharp).

[kazoostudios]

The error might be because node is running a dev server in another tab. That caused a weird error message for me.

[wraybowling]

I second @secondary-school55's opinion that sharp image resizing shouldn't be a default dependency. In my particular case, I'm developing on a Raspberry Pi with an ARM architecture. Sharp didn't completely fail to install, but I did have to build the binary from source.. Thirty minutes later, it was done and I'm fighting its other sub-dependencies hours later. This isn't your fault; it's an issue with Sharp. ...but it makes me want to pull the plug since I know I want to use mostly SVGs anyway. ...I'll go file a proper bug with them, but yeah since someone else said it already, i vote yes to a plugin

[hjvedvik]

I understand. I'll start working on processing of external images soon, and I will most likely extract the image processing stuff into a separate package :)

[YogliB]

Hi @ElliotPsyIT, is this still an issue with version 0.0.8 @gridsome/cli?

[ElliotPsyIT]

@YogliB version 0.0.8 @gridsome/cli worked like a charm!

[gringolalia]

I just downgraded with nvm use 11 — current stable is 12 — and then had to npm rebuild node-sass and then I was good to go. Not I know an elegant solution.