【解決済】「Cannot find module ‘postcss’」が出て動かない！

POSTCSS、それからautoprefixer。cssに自動でベンダープレフィックス入れてくれる奴らですよね。んでもそれが「Cannot find module ‘postcss’」とでて動かない。

…ん？なんで？ちゃんとnpm使って入れたのにこんなのってない…。ものすごく途方に暮れてしまいました。

解決しましたので、このPOSTCSS、autoprefixer使うおうとすると「Cannot find module ‘postcss’」が出る問題の解決方法を紹介しますね。

1. 解決方法
2. 原因はなんだったの？
1. こんなエラーが出る
2. npm installで「WARN」
3. てことでpostcssを入れる
3. まとめ

解決方法

いきなり解決方法から。

これはnpmでインストールしきれてないのが原因なので、足りてないのを手動で入れてあげると解決します。

※-D（–save-devでも同じ意味）

これでPOSTCSSもautoprefixerも使えるようになったはずです。

原因はなんだったの？

こっから下は原因とかエラーの意味とか解決方法とはあまり関係ないんで時間がある人だけ読んでみてくださいね。

こんなエラーが出る

internal/modules/cjs/loader.js:797
    throw err;
    ^

Error: Cannot find module 'postcss'

postcssを、そしてautoprefixerを遣おうとするとこんなエラーが出る。

ふむふむ、「postcss」がないと。いやそんなはずない。ちゃんとネットで見た記事を参考にして

npm install postcss-cli -D
npm install autoprefixer -D

てやってた。そして詰まっていきます。

npm installで「WARN」

あれこれ考えていくとそういえば一番最初にpostcss-cli、autoprefixerをnpmで入れたときに、よーく見ると変なメッセージが出てたんですよね。

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

いや長くて目がちかちかしますね。

なんか書いてあることを適当に訳すと「postcss」てのが必要だけどインストールされてないよ！自分で入れなければいけないよ！ていうのが3行出てきてる感じ。

よく知らないけどnpmとかこういうのって依存関係見て自分で必要なの入れてくれるんじゃないの？なんでpostcssだけ入れてくれないのか、わからない。

てことでpostcssを入れる

なぜ依存関係が分かっていながら自動で入れてくれないのかはわからないけれど、書いてくれてるんで自分でpostcssをインストール。これが冒頭で書いた解決方法になります。

んで見事動き出しました。

まとめ

postcss、autoprefixerをnpm使って入れたのに動かない！時の解決方法を紹介しました。

結局postcss本体が入ってない！ていうのがエラーの原因。勝手に入ってくれると思ってたんだけど、たぶんやり方がなんかヘタこいたんでしょうね。解決したので全然OK。

でも一つだけ言いたいのはこれって「WARN」じゃないよね、ということです。「ERROR」表記でちょうどいいくらいの重要なことだと思うんだけどな。