Nuxt.jsインストールでハマった

6249 ワード
nuxt.js nuxt npm npm テキストリンク

ローカル環境

  • MacOS High Sierra
  • Node.js 12.4.0
  • npm 6.9.0

npx create-nuxt-appでエラー

仕事でNuxt使い始めたけど自宅でも勉強したいなと思い、開発環境整えることに。
早速インストールすると、

$ npx create-nuxt-app my-project
create-nuxt-app v2.10.1
✨  Generating Nuxt.js project in my-project
...
gyp ERR! configure error 
gyp ERR! stack Error: Command failed: /Users/user/anaconda3/bin/python -c import sys; print "%s.%s.%s" % sys.version_info[:3];
...
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
...
SAOError: Failed to install packages in /Users/user/practice/Nuxt/my-project
    at ChildProcess.<anonymous> (/Users/shun/.npm/_npx/17703/lib/node_modules/create-nuxt-app/node_modules/sao/lib/installPackages.js:108:15)
    at ChildProcess.emit (events.js:200:13)
    at maybeClose (internal/child_process.js:1021:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5) {
  __sao: true
}

会社のPCではスムーズにインストールできたのに、gyp ERR、npm ERR、SAOErrorとエラートリプルコンボでハマりました。
しかもSAOErrorとか単体で調べても50件くらいしかヒットしない。

npm install --saveでも同じエラーに

なんぞやーと思ってNodeやnpmのサポートバージョン見ても問題ないので、npm内部の問題なのかと思ってnpm listで調べると、

$ npm list
...
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│   ├── [email protected]
│   └── [email protected] deduped
└── [email protected]

npm ERR! extraneous: [email protected] /Users/shun/node_modules/ethereumjs-wallet/node_modules/aes-js
npm ERR! extraneous: [email protected] /Users/shun/node_modules/ethereumjs-wallet/node_modules/bs58check
npm ERR! extraneous: [email protected] /Users/shun/node_modules/ethereumjs-wallet/node_modules/ethereumjs-util
npm ERR! extraneous: [email protected] /Users/shun/node_modules/ethereumjs-wallet/node_modules/hdkey
npm ERR! extraneous: [email protected] /Users/shun/node_modules/ethereumjs-wallet/node_modules/randombytes
npm ERR! extraneous: [email protected] /Users/shun/node_modules/ethereumjs-wallet/node_modules/utf8
npm ERR! extraneous: [email protected] /Users/shun/node_modules/ethereumjs-wallet/node_modules/uuid
npm ERR! extraneous: [email protected] /Users/shun/node_modules/scrypt.js/node_modules/scryptsy
npm ERR! extraneous: [email protected] /Users/shun/node_modules/solc/node_modules/require-from-string
npm ERR! extraneous: [email protected] /Users/shun/node_modules/solc/node_modules/yargs
...

エラーが表示されてる。
npm installするときに--saveオプションつけないとpackage.jsonのdependenciesに追加されず、このようなエラーを起こすみたい。
対処法として、とりあえずオプションつけてインストールしてみる。

$ npm install --save hoge fuga ...

> [email protected] preinstall /Users/user/node_modules/scrypt
> node node-scrypt-preinstall.js


> [email protected] install /Users/user/node_modules/scrypt
> node-gyp rebuild


gyp ERR! configure error 
gyp ERR! stack Error: Command failed: /Users/shun/anaconda3/bin/python -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
...

Nuxtインストールしたときと同じエラーが。
どうやらanacondaのPythonが邪魔をしていたらしい。

原因はAnaconda

とりあえずanacondaをアンインストール。

$ conda install anaconda-clean
$ anaconda-clean
$ rm -fr ~/.anaconda_backup
$ rm -fr /anaconda3
$ vi ~/.bash_profile  # anacondaのPATHを削除

再度npx create-nuxt-app

ターミナルのタブ切り替えて、再度インストールコマンドを叩く。

$ npx create-nuxt-app my-project
...
🎉  Successfully created project my-project

  To get started:

    cd my-project
    npm run dev

  To build & start for production:

    cd my-project
    npm run build
    npm run start

本当はanacondaアンインストールせずにできれば良かったけど、なんかめんどくさそうだったので次善策としてアンインストールしました。
何はともあれこれでやっとローカルで勉強できる。。

参考

npm listで表示される”extraneous”
node.jsの依存ライブラリを整理してみた
Anaconda3をmacOSから完全にアンインストールする方法

mybatisフレームワーク学習(一)
tomcatでのクッキーの設定とjspでのセッションの設定