error /node_modules/node-sass: Command failedの解決策

タイトルの通り、/node_modules/node-sass: Command failedのエラーが発生し、うまくWebpackが動作せずWebpacker::Manifest::MissingEntryErrorが発生しました。

その解決方法を残しておきます。

環境

ruby 2.7.2
rails 6.0.3.4
node --version v16.0.0

エラー内容

bundle exec rails webpacker:installコマンドを実行するとこのようなエラーが出ました。

error /Users/xxx/xxx/xxx/node_modules/@rails/webpacker/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments: 
Directory: /Users/xxx/xxx/xxx/node_modules/@rails/webpacker/node_modules/node-sass

状況

package.jsonには本来あるはずの以下の記述がありませんでした。

"@rails/webpacker": "5.4.3",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"node-sass": "^7.0.0",

変更内容

1 webpacker

まずは、Gemfileを変更しwebpacekrのバージョンを変更しました

前
gem 'webpacker', '~> 4.0'

後
gem 'webpacker', '~> 5.0'

2 yarn.lock or package.lock.jsonを削除

次に、yarn.lock または package.lock.jsonを削除します

3 package.json

次に、package.jsonに"@rails/webpacker": "5.4.3"を追記します。

4 yarn install

$ yarn installを実行します

5 yarn add node-sass

$ yarn add node-sass

以上の手順でうまくwebpackerが動作するようになりました。