最近、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 -Dnpm 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が必要だけど、インストールされてないよ。自分でインストールしてね。」と書かれています。
２つ目と3つ目のWARNでも、autoprefixer@10.4.4、postcss-reporter@7.0.5には、postcss@^8.0.0が～と同じように書かれています。
つまり、postcssをインストールすれば解決するということです。
エラーの対処法
このエラーは下記コマンドで解決します。
npm i postcss -Dpostcss本体をインストールするだけですね。
インストール後、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 -Dautoprefixerの導入はコーディングの効率化において必須だと思うので、環境構築時に注意してくださいね。
Coment