npm関連の話

Vue.jsでの開発を行う上で遭遇したエラー等について得た情報のまとめ

自分語り

自分用にMarkDownで書かれた文章に目次をつけるプログラムを組んだので公開します
VS Codeとかにはデフォルトであるみたいですが自分でいじれた方がいいかなと思ってつくってみました
自分がQiita等書くにはちょうどいい感じです
言語はpythonです

mdIndex

目次

• npm ERR! Cannot read property 'match' of undefined
• パッケージのバージョン管理
  • バージョンの確認
  • npm-check-updatesが便利
• npm audit
• Error: Cannot find module 'webpack-cli/bin/config-yargs'
• compilation.mainTemplate.applyPluginsWaterfall is not a function

npm ERR! Cannot read property 'match' of undefined

npm installを行った際に遭遇
package-lock.jsonとのズレがあると起こるらしいのでpackage-lock.jsonを消してやると解決

参照ページ

https://qiita.com/mojirico/items/8db742fa5f22e3e719c4
https://www.nekoni.net/Blog/Article/npm-err-cannot-read-property-match-of-undefined

パッケージのバージョン管理

バージョンの確認

通常

terminal

npm list --depth=0 # インストール済みの全てのパッケージ

npm outdated # 古くなったパッケージ
# 各列の意味
# Current => 現在インストールされているバージョン
# Wanted  => package.jsonのsemverを満たす最新のバージョン
# Latest  => 最新バージョン

npm-check-updatesが便利

terminal

npm install -g npm-check-updates # インストール

ncu # 現在のバージョンと最新バージョン
ncu -u # package.jsonの更新
ncu -a # マイナーバージョン以下アップデートについても更新

参照ページ

npm audit

npm install時などに脆弱性を警告されたパッケージについての処理
1. npm auditで脆弱性のあるパッケージを一覧表示
2. npm i [パッケージ名] -Dで修正済みパッケージをインストール
3. npm ls [パッケージ名]でパッケージの依存関係を確認
4. 上記実行時にdedupedを表記されているパッケージを削除(FinderでもOK)
5. npm dedupeで依存関係を整理

package.jsonの更新を自動化すればもっと楽らしい

参照ページ

Error: Cannot find module 'webpack-cli/bin/config-yargs'

sass-loader等を使い始めてからnpm run devで吐かれたエラー
webpack、webpack-cli、webpack-dev-serverのバージョンの組み合わせの問題らしい
全て最新版をインストール

terminal

npm isntall --save-dev webpack@latest # webpack

npm install webpack-cli -D # webpack-cli

npm isntall --save-dev webpack-dev-server@latest # webpack-dev-server

npm install vue-loader@latest # vue-loader

参照ページ

compilation.mainTemplate.applyPluginsWaterfall is not a function

パッケージの脆弱性を解決すると消えた

参照ページ

npmERR! code ELIFECYCLE

npm run dev実行時に発生
特定のエラーを指すものではないようなので、続くエラー文を読んで対応するのがいいと思う
一応、node_modulesフォルダを再インストールで解決はするっぽい

rm -rf node_modules
rm package-lock.json

npm install

参照ページ

TypeError: merge is not a function

npm run dev実行時に発生したエラー
maergeの定義の仕方が間違っているらしい
いじったつもりがなくても要確認
Vue.jsでは、トップのディレクトリのconfigフォルダ内にあるdev.env.jsの記述

dev.env.js

const merge = require('webpack-merge') //これを

const {merge} = require('webpack-merge') // こう

参照ページ

Error: Cannot find module '@babel/core'

こんな要求が来る

babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'ba
bel-loader@7'.

babel/core、babel-loader@7をインストール

npm install --save-dev @babel/core @babel/preset-env
npm install --save-dev babel-loader@7

参照ページ

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

npmというよりはwebpackのエラー

とりあえずvue-loaderをインストール

npm install vue-loader --save-dev

webpaxck.conf.jsに以下を追記

const { VueLoaderPlugin } = require("vue-loader");

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [new VueLoaderPlugin()]

参照ページ