Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

webpack-dev-server manifest paths are incorrect (on windows) #2677

Closed
SleeplessByte opened this issue Aug 2, 2020 · 3 comments
Closed

webpack-dev-server manifest paths are incorrect (on windows) #2677

SleeplessByte opened this issue Aug 2, 2020 · 3 comments

Comments

@SleeplessByte
Copy link

SleeplessByte commented Aug 2, 2020 •
edited
Loading

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:

  1. rails new with webpacker (6.0.3)
  2. everything installs correctly
  3. add the javascript pack in application.html layout
  4. the assets do no precompile, it complains about the compile flag 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.

  1. It will complain that the manifest doesn't exist, despite compile: true being set.
  2. Start webpack-dev-server
  3. Refresh. It will load but the files will not be found
  4. Check logs and see the correctly expected paths
  5. Check public/packs/manifest.json on disk and see the same correctly expected paths
  6. Go to http://localhost:3005/manifest.json and see the incorrect paths
  7. Check that a file from the incorrect paths exists on http://localhost:3000/<path>
@SleeplessByte SleeplessByte changed the title webpack-dev-server manifest paths are incorrect webpack-dev-server manifest paths are incorrect (on windows) Aug 2, 2020
@SleeplessByte
Copy link
Author

I went ahead and just purged gems, yarn cache and everything and it started working again.

No clue what caused this, but it's fixed for me for now. I'll leave this issue for whomever stumbles into this. Shitty solution (because it doesn't tell anyone what the issue was), but "works".

@aardvarkk
Copy link
Contributor

I am also having this issue (or something similar). I have images under images/ and also under images/icons. Somehow, the paths for stuff in /images/icons are being mapped to just icons, but ones inside images map correctly to images. The compilation goes fine, but when I try to visit the page in Rails it can't find the corresponding image because it's looking for it in images/icons. I have tried removing and reinstalling webpacker and also removing and reinstalling all node_modules to no avail.

@aardvarkk
Copy link
Contributor

I cracked the case and made a PR to fix it here: #2730

I'm not sure why tearing out your gems and/or node modules fixed anything for you unless this was a separate issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@aardvarkk @SleeplessByte