Vue.jsのプロジェクトをgit cloneしてbuildするだけなのに色々詰まったお話（雑多メモ）

2022-09-06

GitGitHubMacVue.js

「Vue.jsのプロジェクトをgit cloneしてbuildする」の作業をするにあたり、初回手間取ったので、試行錯誤した作業ログを残す
（トラシューの際の思考を数年後見返して笑う用）

ただのトラシューログなので、成功する手順は、こちらの記事をご確認ください
参考：Vue.jsのプロジェクトをgit cloneしてbuildする

Contents

1. ビルドできない

2. モジュールインストールできない

3. モジュールインストールできるところまで

4. まだビルドできない

5. ビルドできた！

ビルドできない

git cloneは問題なし

 
% git clone https://github.com/yoshi-island/escape-from-20s
% cd escape-from-20s

その後、ビルドしようとしたら、ビルドできない

 
% npm run build

> escape-from-20s@0.1.0 build $HOME/escape-from-20s
> vue-cli-service build

sh: vue-cli-service: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! escape-from-20s@0.1.0 build: `vue-cli-service build`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the escape-from-20s@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     $HOME/.npm/_logs/2022-08-26T07_47_12_928Z-debug.log

モジュールインストールできない

「sh: vue-cli-service: command not found」とあったので「 vue-cli-service」とやらをインストールしようとしてみる
が、できない

% npm install -g @vue/cli-service
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "npm:": npm:vue-loader@^15.9.7

npm ERR! A complete log of this run can be found in:
npm ERR!     $HOME/.npm/_logs/2022-08-26T07_47_33_180Z-debug.log

モジュールインストールできるところまで

「EUNSUPPORTEDPROTOCOL」と言われているが、意味がわからんので、キャッシュクリーンしてみる

% npm cache clean --force
npm WARN using --force I sure hope you know what you are doing.

しかし、エラーは「EUNSUPPORTEDPROTOCOL」のまま変わらず、、
仕方ない、「EUNSUPPORTEDPROTOCOL」で調べるか、

% npm install -g @vue/cli-service
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "npm:": npm:vue-loader@^15.9.7

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/yoshi/.npm/_logs/2022-08-27T03_26_16_880Z-debug.log

以下記事を参考にnpmを新しくしてみる

参考：Vue CLI の導入

% npm install -g npm
$HOME/.nodebrew/node/v10.0.0/bin/npx -> $HOME/.nodebrew/node/v10.0.0/lib/node_modules/npm/bin/npx-cli.js
$HOME/.nodebrew/node/v10.0.0/bin/npm -> $HOME/.nodebrew/node/v10.0.0/lib/node_modules/npm/bin/npm-cli.js
+ npm@8.18.0
added 146 packages, removed 417 packages and updated 59 packages in 7.368s

エラーが変わった！

% npm install -g @vue/cli-service
ERROR: npm is known not to run on Node.js v10.0.0
You'll need to upgrade to a newer Node.js version in order to use this
version of npm. You can find the latest version at https://nodejs.org/

エラー文「npm is known not to run on Node.js v10.0.0」に従い、Node.jsのバージョンを上げてみる

 
% node -v
v10.0.0

Node.jsのバージョン上げ手順は以下手順参考
参考：Node.jsのバージョンアップ（切り替え）手順備忘メモ（Nodebrew利用）

 
% node -v
v18.8.0

「vue/cli-service」とやらのインストールまでできた

 
% npm install -g @vue/cli-service
...
...

added 689 packages, and audited 690 packages in 43s

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

found 0 vulnerabilities

まだビルドできない

再びビルドしようとしたら別のモジュール（vue/cli-plugin-babel）入れろと言われる

 
% npm run build

> escape-from-20s@0.1.0 build
> vue-cli-service build

node:internal/modules/cjs/loader:958
  throw err;
  ^

Error: Cannot find module '@vue/cli-plugin-babel'
Require stack:
- $HOME/.nodebrew/node/v18.8.0/lib/node_modules/@vue/cli-service/lib/Service.js
- $HOME/.nodebrew/node/v18.8.0/lib/node_modules/@vue/cli-service/bin/vue-cli-service.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:955:15)
    at Module._load (node:internal/modules/cjs/loader:803:27)
    at Module.require (node:internal/modules/cjs/loader:1021:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at idToPlugin ($HOME/.nodebrew/node/v18.8.0/lib/node_modules/@vue/cli-service/lib/Service.js:172:14)
    at $HOME/.nodebrew/node/v18.8.0/lib/node_modules/@vue/cli-service/lib/Service.js:211:20
    at Array.map (<anonymous>)
    at Service.resolvePlugins ($HOME/.nodebrew/node/v18.8.0/lib/node_modules/@vue/cli-service/lib/Service.js:198:10)
    at new Service ($HOME/.nodebrew/node/v18.8.0/lib/node_modules/@vue/cli-service/lib/Service.js:35:25)
    at Object.<anonymous> ($HOME/.nodebrew/node/v18.8.0/lib/node_modules/@vue/cli-service/bin/vue-cli-service.js:15:17) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '$HOME/.nodebrew/node/v18.8.0/lib/node_modules/@vue/cli-service/lib/Service.js',
    '$HOME/.nodebrew/node/v18.8.0/lib/node_modules/@vue/cli-service/bin/vue-cli-service.js'
  ]
}

Node.js v18.8.0

キリがないのでpackage.jsonの中身を一括インストール（当たり前だった、、）

 
% npm install
...
...
added 1402 packages, and audited 1403 packages in 2m

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

37 vulnerabilities (1 moderate, 23 high, 13 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

まだ、ビルドはできない、、

 
% npm run build

> escape-from-20s@0.1.0 build
> vue-cli-service build

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

⠸  Building for production...Error: error:0308010C:digital envelope routines::unsupported
...
（略）
...
⠦  Building for production...Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
⠴  Building for production...$HOME/escape-from-20s/node_modules/loader-runner/lib/LoaderRunner.js:114
			throw e;
			^

Error: error:0308010C:digital envelope routines::unsupported
...
（略）
...
    at FSReqCallback.oncomplete (node:fs:201:23) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.8.0

エラー文に従いコマンド打ってみる

 
% npx browserslist@latest --update-db
Need to install the following packages:
  browserslist@4.21.3
Ok to proceed? (y) y
...
（略）
...
caniuse-lite has been successfully updated

No target browser changes

状況変わらず

 
% npm run build

> escape-from-20s@0.1.0 build
> vue-cli-service build


⠹  Building for production...Error: error:0308010C:digital envelope routines::unsupported
...
（略）
...
⠸  Building for production...$HOME/escape-from-20s/node_modules/loader-runner/lib/LoaderRunner.js:114
			throw e;
			^

Error: error:0308010C:digital envelope routines::unsupported
...
（略）
...
    at FSReqCallback.oncomplete (node:fs:201:23) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.8.0

ビルドできた！

エラーが出ているキーワード「ERR_OSSL_EVP_UNSUPPORTED」で情報を検索
以下の記事に従い、「NODE_OPTIONS」を指定

参考：Node.jsのバージョンがv17の場合、Vue.jsプロジェクト起動時に’ERR_OSSL_EVP_UNSUPPORTED’エラーが出る

 
% export NODE_OPTIONS=--openssl-legacy-provider

ビルドできた！

 
% npm run build

> escape-from-20s@0.1.0 build
> vue-cli-service build


⠹  Building for production...

...
（略）
...

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

以上。ふぅ。。