webpack-dev-server manifest paths are incorrect (on windows) #2677
Description
TL;DR on new projects, on windows (maybe the issue), the paths generated by webpacker inline and webpacker-dev-server / webpacker binaries are not equal and thus, no files can be found.
Edit: The correct manifest file lives at http://localhost:3000//packs/* (note the double slash).
Description
I actually think this is the same issue as #2512.
Everything used to work, but when starting a new project / updating an old working project, a few things are happening:
rails newwith webpacker (6.0.3)- everything installs correctly
- add the javascript pack in
application.htmllayout - the assets do no precompile, it complains about the
compileflag not being true (it is, in the config)
Naturally, the other way to go about this is to start webpack-dev-server, which I do. Same as that issue, no files in packs folder, other than manifest.json. The previous explanation is that it compiles in memory (did it always do this??).
Now, the page loads, BUT the asset can not be found:
Cannot GET /packs/js/application-0b5e9ec7c42a81ea2190.js
So I did a check:
- Does that file exist on disk? No
- Is that file in the logs? Yes
- Does this file exist on
http://localhost:3000/<path>? No - Does this file exist on
http://localhost:3005/<path>? No
js/application-0b5e9ec7c42a81ea2190.js 520 KiB application [emitted] [immutable] application
But when I checked out the actual manifest.json from the webpack-dev-server and compared it with the one generated by rails, they are not the same.
- Paths are different
- Hashes are different
http://localhost:3035/manifest.json
{
"application.js": "/packs/application-f2f06104957cdc03fefa.js",
...
}http://localhost:3000/packs/manifest.json
{
"application.js": "/packs/js/application-0b5e9ec7c42a81ea2190.js",
...
}So, let's check again
- Does the file in the webpack-dev-server manifest exist on disk? No
- Is that file in the logs? No
- Does this file exist on
http://localhost:3000/<path>? Yes - Does this file exist on
http://localhost:3005/<path>? Yes
EDIT: The story continues.
For funsies, let's add an extra slash: http://localhost:3000//packs/manifest.json
- Does this file match the content in the logs? Yes
- Do any of those entries exist? No
Reproduce
- Be on Windows 10
- Ruby 2.6
- Create a new rails project with webpacker (with or without react, doesn't matter)
# Update config/routes.rb
Rails.application.routes.draw do
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
#
root to: 'home#show'
end# Create app/controllers/home_controller.rb
class HomeController < ApplicationController
def show; end;
end# Update app/javascript/packs/application.js
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
import "../stylesheets/application.css"
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)# Create app/javascript/stylesheets/application.css
body {
background: red;
}# Update app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>This really doesn't work</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>Now run rails s.
- It will complain that the manifest doesn't exist, despite
compile: truebeing set. - Start
webpack-dev-server - Refresh. It will load but the files will not be found
- Check logs and see the correctly expected paths
- Check
public/packs/manifest.jsonon disk and see the same correctly expected paths - Go to
http://localhost:3005/manifest.jsonand see the incorrect paths - Check that a file from the incorrect paths exists on
http://localhost:3000/<path>