前提・実現したいこと

ruby歴2ヶ月の初学者です。初めての質問なのでわかりにくかったらすいません。
ruby on railsでオリジナルアプリケーションを作成しています。
herokuを使ってデプロイ作業をしようとしたら「remote: ! Precompiling assets failed.」と出てしまいherokuへ送ることができません。
初めてのデプロイではなく過去に何度かはデプロイできていました。現状ローカルではエラーが出ていないと思います。
マイページを作成したのちにcssをいじってからgit push heroku masterしたらこのエラーが出るようになりました。もしかしたらcssに原因があるかもしれないのでcssのソースコードも載せておきます

追記 cssをかけないで同じ挙動をするオリジナルアプリを作成してみたのですが、同じエラーが出たのでCSSは関係なさそうです

さらに追記 cssをかけてみたらレイアウトが崩れていました。やはりcssに原因がある可能性があります

結果　cssが原因ではなかった

発生している問題・エラーメッセージ

git
1remote:        [1/4] Resolving packages...
2remote:        [2/4] Fetching packages...
3remote:        [3/4] Linking dependencies...
4remote:        warning " > webpack-dev-server@4.6.0" has unmet peer dependency "webpack@^4.37.0 || ^5.0.0".
5remote:        warning "webpack-dev-server > webpack-dev-middleware@5.3.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
6remote:        [4/4] Building fresh packages...
7
8そのほかに
9remote:        error /tmp/build_5f742bf3/node_modules/node-sass: Command failed.
10というエラーも見つけました。
11

追記
Command failed.のエラーに対して
https://qiita.com/hryau6/items/820d0b404325688574ba
これを試してみたらエラー文が変わりました。後にまた更新します。

結果　cssが原因ではなかった

該当のソースコード

css
1cssが原因ではありませんでした
2
3追記 cssをかけてみたらレイアウトが崩れていました。やはりcssに原因がある可能性があります
4
5結果　cssが原因ではなかった
6
7### 試したこと
8
9ここに問題に対して試したことを記載してください。
10Googleで調べて色々試してみました
11
12ターミナルで
13RAILS_ENV=production bin/rails assets:precompileをすると
14warning " > webpack-dev-server@4.6.0" has unmet peer dependency "webpack@^4.37.0 || ^5.0.0".
15warning "webpack-dev-server > webpack-dev-middleware@5.3.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
16が出てきます
17
18ターミナルで
19heroku logs --tail --appをすると
20State changed from up to down
21Stopping all processes with SIGTERM
22Process exited with status 143
23Build failed -- check your build output:
24のなどの赤い文字が出てきます
25Process exited with status 143を調べてみてherokuの再起動もしてみました
26
27追記
28cssをかけないで同じ挙動をするオリジナルアプリを作成してみましたがherokuにデプロイできませんでした。
29
30さらに追記 cssをかけてみたらレイアウトが崩れていました。やはりcssに原因がある可能性があります
31
32結果　cssが原因ではなかった
33
34### 補足情報（FW/ツールのバージョンなど）
35
36Googleで調べながらいろんな方法を試していたらrails sをする際にyarnのエラーが出るようになってしまいました。
37warning Integrity check: Flags don't match                                                                                                                       
38error Integrity check failed                                                                                                                                     
39error Found 1 errors.                                                                                                                                            
40
41
42========================================
43  Your Yarn packages are out of date!
44  Please run `yarn install --check-files` to update.
45
46========================================
47
48
49
50rails sをする前にyarn upgradeをするとrails sができるようになります。
51
52初めてみるエラーばかりでGoogleで調べるだけでは解決出来なかったのでよろしくお願いします。

y_waiwai

2021/12/18 11:32

質問文は編集できます無駄に質問建てないで、追記修正しよう

kurigaki

2021/12/18 11:37

質問文を編集しようと戻るボタンを押したら質問が２つ建ってしまいました汗以後気をつけます。すいません汗

m.ts10806

2021/12/18 12:07

片方削除依頼を。

kurigaki

2021/12/18 15:26 編集

片方削除されたようです！慣れていなくてすいません

行動規範の内容に同意します

回答2件

追記
１２月１７日（金）から最新のherokuがnode@16を使う仕様になっているためエラーが出ていた可能性があります。
下記は別の解決方法らしいです。私は別の方法で解決できたのでこちらは試していません。

VScodeで、package.jsonにenginesの記述を追加する

================
{
省略
}, ←ここのカンマ追加を忘れないようにご注意ください
"engines": {
"node": "14.x"
}
}

================

◎buildpackにnodejsを追加
①ブラウザでherokuの公式サイトにログイン
②Herokuのアプリ設定を開く
③Settingsタブを開く
④Buildpacksの項目で「add buildpacks」からnodejsを追加する
⑤buildpacks内においてnodejsを一番上に持ってくる
その後、git push heroku masterを行う

＊注意＊
buildpackにnodejsを追加する際、元々buildpackにあったrubyは削除しないようにお願いいたします。削除してしまうとデプロイ時にbundle install等が実行されず、herokuでのmigrateにおいてcannot load such file -- bundler(LoadError) といったエラーが発生します。

投稿2021/12/20 11:31

編集2021/12/20 11:34

kurigaki

総合スコア1

https://qiita.com/hryau6/items/820d0b404325688574ba
この記事を参考にしたら解決できました

warning " > webpack-dev-server@4.6.0" has unmet peer dependency "webpack@^4.37.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@5.3.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
というwarningに対して記事を参考にしながら
前　gem 'webpacker', '> 4.0'
後　gem 'webpacker', '> 5.0'
のようにGemfileを変更しwebpacekrのバージョンを変更しました

エラーは解決できましたが、何度かherokuにデプロイできていたので、急にwebpackerのバージョンを変更する必要になった原因はまだ理解できていなので、詳しい方ご教授いただけたらと思います。

投稿2021/12/20 02:49

kurigaki

総合スコア1