ESLint実行時の依存関係のバグを修正する

[Tsubasa0129ti]

バグの発生と解消

ESLintを実行したところ、エラーが発生した。
ソースファイルに対してのエラーではなく、依存関係に関わるエラーであった。

$ eslint --ext .vue,.ts web

There was a problem loading formatter: /Users/inouetsubasa/application_template/template/web/node_modules/eslint/lib/cli-engine/formatters/stylish
Error: require() of ES Module /Users/inouetsubasa/application_template/template/web/node_modules/strip-ansi/index.js from /Users/inouetsubasa/application_template/template/web/node_modules/eslint/lib/cli-engine/formatters/stylish.js not supported.
Instead change the require of index.js in /Users/inouetsubasa/application_template/template/web/node_modules/eslint/lib/cli-engine/formatters/stylish.js to a dynamic import() which is available in all CommonJS modules.
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

この問題を解消するため、以下の記事を参考にする。
yarnpkg/yarn#8976

しかし、パッケージの整理を行うので、子ブランチを作成して、そこで対応する。

Originally posted by @Tsubasa0129ti in #3 (comment)

[Tsubasa0129ti]

対応方針

いくつか対応方針があるみたい。

1. yarn.lockを削除して、再度yarn installを実行する。
   • 一応の解消にはなるらしいが、再発するらしい。
2. yarnを最新バージョンにする。
   • npmのバージョンアップも必要になるかもしれない。
3. バージョン6.0.1のstrip-ansiをインストールする。

[Tsubasa0129ti]

Yarnのバージョンアップ

この依存関係のバグは、yarn起因のものであった。
yarnをバージョンアップすることで解消が可能。
以下に対応内容について記載する。

Yarnのバージョンアップ対応

Yarnをバージョンアップする前に、Node.jsとnpmをバージョンアップする必要がある。
nodebrewに似たツールであるnを使って、バージョンアップを行う。

# nをインストールする。(nodebrewみたいなもの)
$ npm install -g n
changed 1 package in 1s

# Node.jsの最新バージョンを確認する。
$ n --latest
21.7.1

# Node.jsをバージョンアップする。
$ sudo n latest
Password:
  installing : node-v21.7.1
       mkdir : /usr/local/n/versions/node/21.7.1
       fetch : https://nodejs.org/dist/v21.7.1/node-v21.7.1-darwin-x64.tar.xz
     copying : node/21.7.1
   installed : v21.7.1 (with npm 10.5.0)

# npmをアップデートする。
$ sudo npm update -g npm
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@achrinza/[email protected]',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '8 || 9 || 10 || 11 || 12 || 13 || 14 || 15 || 16 || 17 || 18 || 19'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v21.7.1', npm: '10.5.0' }
npm WARN EBADENGINE }

changed 14 packages in 4s

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

では、Yarnをアップグレードする。

# 失敗（latestの指定ではダメだった）
$ yarn set version latest
Warning: Your current Yarn binary is currently Yarn 1.22.21; to avoid potential breaking changes, 'set version latest' won't receive upgrades past the 1.22.x branch.
         To upgrade to the latest versions, run yarn set version stable instead. Sorry for the inconvenience.

Resolving latest to a url...
(node:17522) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
Downloading https://github.com/yarnpkg/yarn/releases/download/v1.22.22/yarn-1.22.22.js...
Saving it into /Users/inouetsubasa/.yarn/releases/yarn-1.22.22.cjs...
Updating /Users/inouetsubasa/.yarnrc...
Done!

# 出力の通りにstableを指定する。
$ yarn set version stable
➤ YN0000: You don't seem to have Corepack enabled; we'll have to rely on yarnPath instead
➤ YN0000: Downloading https://repo.yarnpkg.com/4.1.1/packages/yarnpkg-cli/bin/yarn.js
➤ YN0000: Saving the new release in .yarn/releases/yarn-4.1.1.cjs
➤ YN0000: Done with warnings in 0s 213ms

# バージョンを確認する。
$ yarn --version
4.1.1

これでYarnのアップデートが完了した。

[Tsubasa0129ti]

プロジェクトへの反映

Yarnをバージョンアップしたが、templateプロジェクトではまだそれが反映されていない。
今の状態では、yarn installとかはできないし、依存関係もv1.22.21の時と変わらない。

こちらの記事を参考にした。

この対応後、package.jsonに設定したスクリプトが実行可能となった。
なお、lintのスクリプトは別の理由で起動しなかった。

# 1.22.21のバージョンで作成された依存ファイルは削除する。
$ rm -rf yarn.lock node_modules **/node_modules

# yarn.lockを作成
$ touch yarn.lock .yarnrc.yml

# Yarnのバージョンを明示的に指定する。
$ yarn set version stable

# .yarnディレクトリが作成され、.yarnrc.ymlに以下の設定が追加される。
# yarnPath: .yarn/releases/yarn-4.1.1.cjs
# この下の行に以下の設定を追加する。
# nodeLinker: node-modules

# package.jsonに設定したパッケージをインストールする。
$ yarn install