Webpacker::Manifest::MissingEntryErrorと出た時の対処法

bundle exec rails s

して、localhsotにアクセスすると下記のエラーが出てしまい、対処できない。。。そんなことで困っていませんか。

Webpacker::Manifest::MissingEntryError in Welcome#index
Webpacker can't find application in public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}

今回は、この解決方法をお教えしたいと思います。

解決方法

gemファイルに書いてあるwebpackerを最新のものにします。今回私の場合は、下記のように5以上にしました。

gem 'webpacker',    '~> 5.0'

次に、bundleします。

bundle

そして、再度webpackerをインストールします。その際に色々と聞かれる場合は、全てOverrideしてください。そのため、Yと回答してください。

bundle exec rails webpacker:install

これで、準備は整ったので、

bundle exex rails webpacker:compile

を行い終わります。これで、再度

bundle exec rails s

で確認してみてください。無事にエラーがなくなっていると思います。

エラーの原因

まず下記のコマンドを実行してみます。

bundle exec rails webpacker:compile

すると、下記のようにInvalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. と出ました。これはインストールバージョンのWebpackerとファイルに書いてある記述方法が違いますよということです。そのため、webpackerのバージョンと記述方法のバージョンを合わせれば解決できます。

解決方法は二つあり、

記述してあるバージョンに合わせる
インストールしているバージョンに記述を合わせる

になります。今回は、1の解決方法とっています。基本的には新しいバージョンに合わせるが良いので、その方法にしています。

Compiling…
Compilation failed:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property ''. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
         }
       })
     ]

参考: webpacker-cant-find-application