Rails: Webpacker::Manifest::MissingEntryError in Home#index

Question

Webpacker::Manifest::MissingEntryError in Home#index Showing /Users/khalidhosein/Desktop/myEPKmedia/builder/khalid101/app/views/layouts/embedded_app.html.erb where line #7 raised:

Webpacker can't find hello_react.js in /Users/khalidhosein/Desktop/myEPKmedia/builder/khalid101/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:
{
  "application.js": "/packs/application-68dcba18197451fbb79e.js",
  "application.js.map": "/packs/application-68dcba18197451fbb79e.js.map"
}
Extracted source (around line #7):
5
6
7
8
9
10

    <% application_name = ShopifyApp.configuration.application_name %>
    <title><%= application_name %></title>
    <%= javascript_pack_tag 'hello_react' %>
    <%= stylesheet_link_tag 'application' %>
    <%= javascript_include_tag 'application', "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>

Rails.root: /Users/khalidhosein/Desktop/myEPKmedia/builder/khalid101

Application Trace | Framework Trace | Full Trace
app/views/layouts/embedded_app.html.erb:7:in `_app_views_layouts_embedded_app_html_erb___4509380428416253144_70127991029820'
Request
Parameters:

None

I am getting this error when trying to connect my Rails app with a React front end. I've tried researching and re-configuring files from all sources. I have also recreated manifiest.json files and packs libraries. I am following this tutorial:

https://github.com/natemacinnes/natemacinnes.github.io/blob/master/rails-5-shopify-app-setup.md

If anyone has any ideas it would be greatly appreciated as there isn't much documentation or tutorials out there going over connecting Rails Shopify API with React.

MY CODE---->https://github.com/KhalidH82/ShopifyApp-React-Rails

Answer 1

I had to same challenge when trying to set up a new Rails 6 application in Ubuntu 20.04.

When I start the rails server, and go to my browser I get the error:

Webpacker::Manifest::MissingEntryError in Books#index
Showing /home/promisepreston/dynamic_authorization/app/views/layouts/application.html.erb where line #9 raised:

Webpacker can't find application in /home/promisepreston/dynamic_authorization/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:
{

Here's how I fixed it:

The issue was that I had not setup webpacker in the Rails 6 application. Starting with Rails 6, webpacker is the default JavaScript compiler. It means that all the JavaScript code will be handled by webpacker instead of the old assets pipeline aka sprockets.

To install webpacker in your Rails 6 application simply run the command:

bundle exec rails webpacker:install

OR

rails webpacker:install

This should successfully install webpacker and all of its dependencies.

That's all.

I hope this helps

Answer 2

Though I am not using react, but was getting the same error on a newly created Rails 6 app. Reinstalling webpacker fixed it for me:

bundle exec rake webpacker:install

I guess it probably was some missing dependency, or a bug in an older version (I noticed webpack-dev-server version was upgraded to 3.8.1).