Vue Nativeを試そうとした時のエラー調査まとめ

Vue Nativeをインストールしたら色々と予期せぬことが起きたのでそのメモ。結局まだ解決してないです、もし原因がわかったら記事を更新します。

インストールは公式のもを読みながら進めました。 Vue Native Install

環境

$ node -v
v10.1.0
$ npm -v
6.1.0
$ vue-native -v
0.0.1-alpha.18

インストール

$ npm install -g vue-native-cli

インストールの確認

$ which vue-native
/usr/local/bin/vue-native

いざプロジェクト作成

$ vue-native init sample_project
Error In Getting Crna Package Version { Error: Command failed: create-react-native-app --version 2>/dev/null
    at checkExecSyncError (child_process.js:596:11)
    at execSync (child_process.js:633:13)
    at Object.getCrnaVersionIfAvailable (/usr/local/lib/node_modules/vue-native-cli/src/utils/validation.js:43:9)
    at Command.<anonymous> (/usr/local/lib/node_modules/vue-native-cli/src/index.js:29:63)
    at Command.listener (/usr/local/lib/node_modules/vue-native-cli/node_modules/commander/index.js:315:8)
    at Command.emit (events.js:182:13)
    at Command.parseArgs (/usr/local/lib/node_modules/vue-native-cli/node_modules/commander/index.js:651:12)
    at Command.parse (/usr/local/lib/node_modules/vue-native-cli/node_modules/commander/index.js:474:21)
    at Object.<anonymous> (/usr/local/lib/node_modules/vue-native-cli/src/index.js:63:9)
    at Module._compile (internal/modules/cjs/loader.js:678:30)
  status: 127,
  signal: null,
  output: [ null, <Buffer >, <Buffer > ],
  pid: 15880,
  stdout: <Buffer >,
  stderr: <Buffer > }
Please globally install create-react-native-app dependency

しょっぱなからエラーがでた。 Error: Please globally install create-react-native-app dependency #3

create-react-native-appというパッケージをインストールしていなかったという初歩的なミスでした。インストールして再実行。

$ npm install -g create-react-native-app

改めてプロジェクト作成

$ vue-native init sample_project
Installed Crna Version create-react-native-app version: 1.0.0
prompt: Directory sample_project Is InValid. Do You Want To Continue?:  (no) yes
Creating Vue-Native sample_project App
⠋ Creating react native app sample_project project
✔ Create react-native sample_project project
readline.js:1024
            throw err;
            ^

Error: ENOENT: no such file or directory, chdir 'sample_project'
    at handleAndAddVueNativePackageDependencySync (/usr/local/lib/node_modules/vue-native-cli/src/index.js:140:11)
    at createNormalNativeApp (/usr/local/lib/node_modules/vue-native-cli/src/index.js:90:3)
    at init (/usr/local/lib/node_modules/vue-native-cli/src/index.js:78:7)
    at /usr/local/lib/node_modules/vue-native-cli/src/prompt/index.js:22:7
    at /usr/local/lib/node_modules/vue-native-cli/node_modules/prompt/lib/prompt.js:336:32
    at /usr/local/lib/node_modules/vue-native-cli/node_modules/async/lib/async.js:154:25
    at assembler (/usr/local/lib/node_modules/vue-native-cli/node_modules/prompt/lib/prompt.js:333:9)
    at /usr/local/lib/node_modules/vue-native-cli/node_modules/prompt/lib/prompt.js:342:32
    at /usr/local/lib/node_modules/vue-native-cli/node_modules/prompt/lib/prompt.js:625:5
    at Interface.onLine (/usr/local/lib/node_modules/vue-native-cli/node_modules/read/lib/read.js:111:5)

なんかエラーがでた。ディレクトリがない？試しに作ってみて再度実行すると上手くいきました。

$ mkdir sample_project
$ vue-native init sample_project
$ cd sample_project

これでインストールが完了。

実行してみる

$ npm start

> sample_project@0.1.0 start ~/develop/vue_native/sample_project
> react-native-scripts start

14:58:29: Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
  sudo sysctl -w kern.maxfiles=5242880
  sudo sysctl -w kern.maxfilesperproc=524288

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sample_project@0.1.0 start: `react-native-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sample_project@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     ~/.npm/_logs/2018-06-30T05_58_29_939Z-debug.log

またなんかエラーがでた。次はなんすか。エラーについて調べていると、ファイル読み込み最大値？が足りないといったよな内容のエラーみたいです。画面に出力されているコマンドを実行。

$ sudo sysctl -w kern.maxfiles=5242880
$ sudo sysctl -w kern.maxfilesperproc=524288

再度実行してみる

$ npm start

> sample_project@0.1.0 start ~/develop/vue_native/sample_project
> react-native-scripts start

15:33:26: Starting packager...
(node:17278) ExperimentalWarning: The fs.promises API is experimental
***ERROR STARTING PACKAGER***
No issue with doctor-npm-version
No issue with doctor-watchman-version
No issue with doctor-problem-checking-watchman-version
No issue with doctor-both-app-and-exp-json
No issue with doctor-schema-validation
No issue with doctor-validate-asset-fields
No issue with doctor-schema-validation-exception
No issue with doctor-unversioned
No issue with doctor-versions-endpoint-failed
No issue with doctor-invalid-sdk-version
No issue with doctor-node-modules-missing
No issue with doctor-react-native-not-installed

(node:17285) ExperimentalWarning: The fs.promises API is experimental

今日はいろんなことにつまずきます。次の次はなんすか。 fs.promisesというものが、実験的？直感だけど、バージョンの差異が関係してそう。

ここで時間がなくなったので、一旦調査と対応は中断。以下はメモですけど残しておきます。

調査メモ

$ npm audit

                       === npm audit security report ===

# Run  npm install --save-dev react-native-scripts@1.14.1  to resolve 2 vulnerabilities
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Prototype pollution                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ hoek                                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ react-native-scripts [dev]                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ react-native-scripts > xdl > jsonwebtoken > joi > hoek       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/566                       │
└───────────────┴──────────────────────────────────────────────────────────────┘

┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Prototype pollution                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ hoek                                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ react-native-scripts [dev]                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ react-native-scripts > xdl > jsonwebtoken > joi > topo >     │
│               │ hoek                                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/566                       │
└───────────────┴──────────────────────────────────────────────────────────────┘

# Run  npm install expo@28.0.0  to resolve 1 vulnerability
SEMVER WARNING: Recommended action is a potentially breaking change
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Prototype Pollution                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ lodash                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ expo                                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ expo > react-native-web-maps > react-google-maps > lodash    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/577                       │
└───────────────┴──────────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────────────────────────┐
│                                Manual Review                                 │
│            Some vulnerabilities require your attention to resolve            │
│                                                                              │
│         Visit https://go.npm.me/audit-guide for additional guidance          │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Denial of Service                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ ws                                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >= 1.1.5 <2.0.0 || >=3.3.1                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ react-native                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ react-native > react-devtools-core > ws                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/550                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Prototype Pollution                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ lodash                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=4.17.5                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ react-native                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ react-native > plist > xmlbuilder > lodash                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/577                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 5 vulnerabilities (2 low, 2 moderate, 1 high) in 36215 scanned packages
  run `npm audit fix` to fix 2 of them.
  1 vulnerability requires semver-major dependency updates.
  2 vulnerabilities require manual review. See the full report for details.

打ったらよさげなコマンド。

$ npm install --save-dev react-native-scripts@1.14.1
$ npm install expo@28.0.0
$ npm audit fix

$ npm i npm@latest -g
$ npm audit
$ npm audit fix --force

package.jsonの中身

$ cat package.json
{
  "name": "sample_project",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "eslint": "^3.19.0",
    "jest-expo": "~27.0.0",
    "react-native-scripts": "^1.14.1",
    "react-test-renderer": "16.3.1",
    "vue-native-scripts": "0.0.10"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "jest"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "expo": "^28.0.0",
    "react": "16.3.1",
    "react-native": "^0.55.4",
    "vue-native-core": "0.0.7",
    "vue-native-helper": "0.0.8"
  }
}

参考

react-native-scripts start stuck at "Starting packager..."#343