webpacker: `resolved_paths` seems not working for images

I’m trying Webpacker 4 & Rails 6 (both on master branch)

I set resolved_paths: ['app/assets'] in webpacker.yml and put an image app/assets/images/avatar.png

In app/javascript/packs/application.js I adding import "images/avatar.png"

in Rails view <%= image_pack_tag 'images/avatar.png', alt: 'My avatar' %>

Then I start Rails and browse the page, I got Webpacker::Manifest::MissingEntryError in Home#index

Webpacker can't find images/avatar.png in /home/jasl/Workspaces/Ruby/my_app/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:
{
  "_/assets/images/avatar.png": "/packs/_/assets/images/avatar-057862c747f0fdbeae506bdd0516cad1.png",
  "application.js": "/packs/application-f14777d02f7b6cadd4f6.js",
  "application.js.map": "/packs/application-f14777d02f7b6cadd4f6.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/application-f14777d02f7b6cadd4f6.js"
      ],
      "js.map": [
        "/packs/application-f14777d02f7b6cadd4f6.js.map"
      ]
    }
  }
}

I think "_/assets/images/avatar.png": "/packs/_/assets/images/avatar-057862c747f0fdbeae506bdd0516cad1.png" look strange.

If I move app/assets/images/avatar.png to app/javascript/images/avatar.png, it would be OK.

But I do another experiment that I have app/assets/stylesheets/application.scss

In app/javascript/packs/application.js I adding import 'stylesheets/application'

In Rails view <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

No problem here.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 19 (13 by maintainers)

Most upvoted comments

Does this mean you can’t have nested assets with the same name without reverting to the previous functionality? Trite example, but if I have packs/images/users/default.jpg and packs/images/posts/default.jpg is it expected that only one of those will be available?

From a quick test it looks like both files will actually be copied to public during compilation (with different hashes suffixed) but only one will be referenced in manifest.json. This seems like an odd default to me and could result in confusion for developers not understanding why they are getting the wrong asset.

does the media can be configured?

No, not atm

packs/images/avatar.png also will be media/avatar.png right?

yes

if I have both assets/images/avatar.png and packs/images/avatar.png what behavior is correct?

Just put everything in -> app/javascript/images if you are fully using webpacker and not sprockets.

Hi, I can help with your issue, I think you are doing it wrong, First, I think you should leave your resolved_paths as the default like so: resolved_paths: []