npm audit fixで修正できない依存関係を手動で修正しアップデートしていたら発生しました。

<h2 id="h8d027c8ed3">はじめに</h2><p>Next.jsを利用しているとnode_modulesのchokidarのreaddirpで問題が発生しnpm run devをする度に黄色のエラー文が表示されました。<br><br>この時私はまだ知らなかったのですが、chokidarはファイル監視を行いファイルの変更を検知して処理を実行できるモジュールのことみたいですね。<br><br>サイトをlocalhostで立ち上げたり、本番環境では特に問題がなかったのですが毎回黄色の文で注意されるのもなんだったので解決策を考えてみました。<br></p><h2 id="h9bbb0bca62">開発環境</h2><p>node v14.14.1 (Fermium)<br>npm v6.14.14<br>macOS BigSur<br></p><h3 id="h9c52a97ec2">黄色で出力されるエラー文</h3><p>このような文で始まり、 エラー文は黄色の太文字で出力されていました。<br><br>意味としてはデータをキャッシュへ保存しようとしている最中にエラーが発生し、その問題はchokidarのreaddirpを解決できなかったことを示しています。</p><pre><code>[webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'readdirp' in [パス名]/node_modules/chokidar to a directory</code></pre><h2 id="had0b1b94af">解決方法</h2><p>私が行った解決方法としては以下の手順です。<br></p><h3 id="hde282a442d">nodeのバージョンをアップグレード</h3><p>nodeはバージョン17.0.1が最新版でリリースされていたので今回はそれをインストールします。<br><br>※現在v17.0.0以降にするとエラーが発生する可能性があるので心配な方はv16以前のものにアップグレードしてください。<br><br>v17.0.0以降にしてエラーが発生してしまった方は下記の記事を参考にしてみてください。<br><a style="color:#1784e9" href="https://digisquare.jp/blog/7" target="_blank" rel="noopener noreferrer">Node.jsをアップデートしたらエラーが発生し強制終了する</a><br><br>私はnodeのバージョン管理ツールとして「n」を使用します(他にはnodebrewやnodeenvもありますね)。<br><br>nodeがあってこその今回のエラーなのでnodeはもう導入済みだと思います。<br><br>下記コマンドでグローバルインストールしてしまいましょう。</p><pre><code>npm install -g n</code></pre><p>nのバージョン確認を行ってインストールができたか確認してみましょう。</p><pre><code>n -V</code></pre><p>latestとすることでnodeの最新版をインストールできます。</p><pre><code>n latest// バージョンを指定したい方はlatestの代わりに17.0.0などバージョンの値を入れてください！</code></pre><p>インストールが完了したらこちらも再度確認しておきましょう。<br><br>任意のバージョンになっていたら成功です！</p><pre><code>node -v</code></pre><h3 id="h390bfb2fd3">package-lock.jsonとnode_modulesの削除</h3><p>以下のコマンドを実行することで削除の確認をせずに一発で削除できます。</p><pre><code>rm -rf package-lock.json node_modules/</code></pre><p>npmのキャッシュを削除しておかないと次に行うnpmの再インストールでエラーが出る可能性があるので実行しておくことをお勧めします。</p><pre><code>npm cache clean --force</code></pre><h3 id="h807b020502">npmの再インストール</h3><p>削除したnode_modules/とpackage-lock.jsonが生成されます。</p><pre><code>npm install</code></pre><h3 id="ha4f4c9f20f">なぜこのエラーが発生したのか</h3><p>私は当初、npm audit fixで修正できない依存関係があったためpackage-lock.jsonの中身を手動で修正しアップデートしていました。<br><br>その後、発見されている脆弱性はなくなったのですがアップデートをしてしまったためかnodeのバージョンが古く、対応しきれずにいた可能性があります。<br></p><h2 id="h9be0c3393d">おわりに</h2><p>私が調べた限りだと日本語の記事はまだ存在しておらず、英語の記事も今回のエラー文と一致するものはなかったので同じ理由でお困りの方のお力添えができたらと思い記事にまとめました。<br><br>皆様のお役に立てれば幸いです。最後までご覧くださりありがとうございました。</p>

npm run dev後に<w>からなる黄色のエラー文の対処法

Node.jsのバージョンを17へアップデート後、いつも通りnpm run devすると見たことないエラー文が出てきました。

<h2 id="h8d027c8ed3">はじめに</h2><p>私は普段、Next.jsを使用しているのですが、nodeをアップデートしnpm run devを実行したら、その直後にエラーが発生し強制終了してしまったので解決策を調べてみました。</p><h2 id="h9bbb0bca62">開発環境</h2><p>Node.js v17.0.1<br>npm v8.1.0<br>macOS BigSur</p><h2 id="he45680f0bc">参考記事</h2><p><a style="color:#1784e9" href="https://github.com/webpack/webpack/issues/14532" target="_blank" rel="noopener noreferrer">nodejs 17: digital envelope routines::unsupported #14532</a></p><h3 id="hdbdf25c00f">エラー文</h3><pre><code>node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);

Error: error:0308010C:digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'</code></pre><h2 id="had0b1b94af">解決方法</h2><p>package.json内のscriptsを以下の様に編集。<br>最初はbuildにNodeのオプションをつけていたのですが、vercelへのデプロイが上手くいかなかったので新しくlegacy-buildを作成し、通常のbuildとは切り離して考えています。</p><pre><code>"scripts": {
&nbsp;&nbsp;&nbsp;&nbsp;"dev": "export NODE_OPTIONS=--openssl-legacy-provider; next dev",
&nbsp;&nbsp;&nbsp;&nbsp;"build": "next build",
&nbsp;&nbsp;&nbsp;&nbsp;"legacy-build: "export NODE_OPTIONS=--openssl-legacy-provider; next build",
&nbsp;&nbsp;&nbsp;&nbsp;// start等は省略
}</code></pre><h3 id="h29425a3486">なぜ、エラーが発生したのか</h3><p>Node.jsはバージョン17以降、OpenSSLが1.1.0から3.0.0にアップデートしました。<br>そのためにnode v16以前で機能していたOpenSSLとは互換性がなく、今回のようなエラーが発生してしまったようです。</p><h2 id="ha214098e44">まとめ</h2><p>今回は開発環境立ち上げ時とビルド時の処理としてOpenSSLのレガシープロバイダーを利用するオプションを記述してありますが、v17が落ち着くまでの間、v16以前へダウングレードするのも一つの手かもしれませんね。<br><br>この記事がお役に立てば幸いです。</p>

Node.jsをアップデートしたらエラーが発生し、強制終了する

npmでパッケージをグローバルインストールしようとしたらパーミッションエラーが発生した時の対処法について。

<h2 id="h9710ffdf15">余談</h2><p>npmで-gを使用しないインストールは普段行っていたのですが、</p><pre><code>npm install -g [パッケージ名]</code></pre><p>上記のコマンドでパッケージをグローバルインストールしようとした際に以下のエラーが発生しました。</p><pre><code>errno -13 Error: EACCES: permission denied, access '/usr/local/lib/node_modules'</code></pre><h3 id="had0b1b94af">解決方法</h3><p>所有権を現在使用しているユーザーに変更するため、以下のコマンドを実行します。</p><pre><code>sudo chown -R $( whoami ) /usr/local/lib/node_modules</code></pre><h4 id="h4833b037d8">コマンド解説</h4><p>sudo: スーパーユーザー(最も実行権限のあるアカウント)でコマンドを実行<br><br>chown -R: 指定したディレクトリとそのディレクトリ以下のファイルやディレクトリ(ここではnode_modulesの中身を指します)の所有権を変更する<br><br>/usr/local/lib/node_modules: 上記のコマンド対象となるディレクトリのパス<br></p><h4 id="hf639a082c8">変数解説</h4><p>$(): ()の中に変数名を入れることで文字列としてコマンド内で表示可能です。<br><br>whoami: 現在のユーザー名を表します。</p><h3 id="ha4f4c9f20f">なぜこのエラーが発生したのか</h3><p>npmでパッケージをグローバルインストールする際にはnode_modulesディレクトリとその配下へのアクセス権限が必要です。<br><br>今回の場合、コマンドを実行したユーザーにはnode_modulesに変更を加える権限がなかったためパッケージのインストールが出来ず、上記のエラーが出てしまいました。</p>

npmの記事
Article filter by npm

npm run dev後に<w>からなる黄色のエラー文の対処法

Node.jsをアップデートしたらエラーが発生し、強制終了する

npmを使ったグローバルインストールでエラーが発生した際の対処法

- Introduction -

Espressの成り立ちとデジタルクリエイティブにおける想い

npmの記事Article filter by npm

npm run dev後に<w>からなる黄色のエラー文の対処法

Node.jsをアップデートしたらエラーが発生し、強制終了する

npmを使ったグローバルインストールでエラーが発生した際の対処法

- Introduction -

Espressの成り立ちとデジタルクリエイティブにおける想い

npmの記事
Article filter by npm