Situation
After setting up my Rails 6 application and running rails server for the first time, I navigated to http://localhost:3000 to check if everything was working.
However, I immediately encountered an error screen, and the server log displayed the following messages:
It seemed like Webpacker
was trying to compile my JavaScript assets but couldn’t complete the process because it couldn't find webpack
.
Error
error Command "webpack" not found.
Rendered layout layouts/application.html.erb (Duration: 930.4ms | Allocations: 11999)
Completed 500 Internal Server Error in 934ms (ActiveRecord: 0.0ms | Allocations: 14691)
ActionView::Template::Error (Webpacker can't find application.js in /home/athanasius/www/mind_dash/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:
{
}
):
Explanation
The error you're seeing indicates that Webpacker
is failing to compile your assets because it can't find the webpack
command.
This issue typically arises when webpack
isn’t properly installed or configured in your Rails 6 application.
Solution
To resolve issues with Webpacker
, first ensure that webpack and webpack-cli
are installed in your project.
At least, this is how I solved my issue.
Install webpack and dependencies
yarn add webpack webpack-cli
Once the installation completes, you should see output indicating that webpack
and webpack-cli
have been successfully added to your node_modules
directory.
Rebuild webpacker
After installing webpack, it’s important to rebuild Webpacker to ensure all configurations are updated.
This command will generate or update files required for Webpacker to function correctly with Rails:
rails webpacker:install
This command’s output should confirm that Webpacker has been installed and configured. It typically generates a message indicating that Webpacker's configuration files have been successfully created or updated.