autoprefixerが「Error [ERR_MODULE_NOT_FOUND]: Cannot find package」で動かないときの対処法

最近、npm-scriptを用いてコーディング環境を作ろうと思い、必要なモジュールやパッケージをインストールしnpm run buildなどで実行できるよう奮闘中です。

その中で、autoprefixerを用いてnpx postcss style.css --use autoprefixer -o style.cssでベンダープレフィックスを付与しようとしたところ下記のエラー文が表示され、付与できませんでした。

Error [ERR_MODULE_NOT_FOUND]: Cannot find package

今回は、autoprefixerの実行時にError [ERR_MODULE_NOT_FOUND]: Cannot find packageが表示され正常に動作しないときの対処法を紹介します。

目次

エラーが表示される原因

この、Error [ERR_MODULE_NOT_FOUND]: Cannot find packageが表示され正常に動作しない原因は、postcssパッケージがインストールされていないからです。

よくある解説記事では、autoprefixerは下記のコマンドでインストールできると紹介されています。

npm i postcss-cli autoprefixer -D

npm installするだけで、依存関係にあるパッケージも一緒にインストールされるものもありますが、postcssはインストールされないようです。

実は、インストールのコマンドを実行したときに下記の警告文が表示されています。

npm WARN postcss-cli@9.1.0 requires a peer of postcss@^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN autoprefixer@10.4.4 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN postcss-reporter@7.0.5 requires a peer of postcss@^8.1.0 but none is installed. You must install peer dependencies yourself.

インストールしたときは、package.jsonファイルにパッケージ名とバージョンが記載されていたので正常にインストールされていたと思ってましたが、よく読んでみると、1つ目のWARNには、「postcss-cli@9.1.0には、postcss@^8.0.0が必要だけど、インストールされてないよ。自分でインストールしてね。」と書かれています。

2つ目と3つ目のWARNでも、autoprefixer@10.4.4、postcss-reporter@7.0.5には、postcss@^8.0.0が~と同じように書かれています。

つまり、postcssをインストールすれば解決するということです。

エラーの対処法

このエラーは下記コマンドで解決します。

npm i postcss -D

postcss本体をインストールするだけですね。

インストール後、npx postcss style.css --use autoprefixer -o style.cssでベンダープレフィックスを付与するコマンドを実行すると、正常に動作することが確認できました。

終わりに

今回は、autoprefixerの実行時にError [ERR_MODULE_NOT_FOUND]: Cannot find packageが表示されたときの対処法を紹介しました。

npm i postcss-cli autoprefixer -Dの実行では、postcss本体はご自身でインストールする必要があります。

npm i postcss -D

autoprefixerの導入はコーディングの効率化において必須だと思うので、環境構築時に注意してくださいね。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Coment

コメントする

スパム対策のためコメントは日本語で入力してください。

CAPTCHA

目次