Missing entry error. Loading a image

[hebergentilin]

Using the default configuration I could not read a file through the <%= asset_pack_path 'images/calendar.png' %> helper in a view. Reading the docs it seems easy to do, but the webpacker keep asking me to add it in manifest.json.

calendar.png is inside the app/javascript/images/ folder.

Am I missing some configuration?

[gauravtiwari]

asset_pack_path only references assets used as pack (i.e. JS packs file) or assets used inside a pack like a font, image or styles referenced that's why it's not present inside manifest.json. asset_pack_path doesn't look inside any folder like rails view helpers for assets.

Perhaps use Rails image_path helper if you want to reference images that’s not used inside packs.

Makes sense?

[hebergentilin]

Yes, but ask me a question.
Why the example inside the Link in your Rails views topic uses the asset_pack_path in view?

[gauravtiwari]

@hebergentilin Yeah, not very clear. Thanks for point out, I will fix 👍

[dbalatero]

@gauravtiwari I was just going to leave another giant issue on the docs being unclear, and I found this closed issue. The docs still aren't clear on this point, and I definitely spent some time tracking down the same conclusion that was said above. I think this issue should be reopened until the docs are updated.

I understand that we need to generate the manifest file outside of the Rails view context–webpack can't really know if asset_pack_path is being used in the view, nor does it know what paths are passed to it.

However, I wonder if we could just provide paths to files that we explicitly want Webpacker to manage and include in the manifest in config/webpacker.yml?

static_files:
  - fonts/**/*
  - images/**/*
  - misc/LICENSE.txt
  # etc

[dbalatero]

@gauravtiwari also if the static_files idea seems interesting to you, I'm happy to send a PR.

[gauravtiwari]

@dbalatero Sounds interesting and it will make the setup almost comparable to asset pipeline, however I am bit worried that this goes against the convention - usually with webpack it's tree of assets that goes through the compiler and emitted out. So, one doesn't have to make it explicitly available somewhere (in a folder) but instead if a file is referenced inside an entry file it will be compiled by some loader and emitted out.

Here is a diagram from the website:

I understand, there are occasions where one would just like to reference some image file in Rails view, in that case using good old asset pipeline still makes sense. Probably at some point we can merge in both so one gets best of both worlds.

[brentdodell]

I'm still confused about this. Per this discussion, and other's I've read, shouldn't I be able to do the following?

// app/javascripts/packs/Icons.js
import 'Icons/svgs/cart.svg';

<!-- app/views/layouts/application.html.erb -->
<%= javascript_pack_tag 'Icons' %>

<!-- app/views/layouts/main_nav.html.erb -->
<img src="<%= asset_pack_path('Icons/svgs/cart.svg') %>" />

I get the following output from webpacker (which makes it look like it's working):

                                               Asset       Size  Chunks                    Chunk Names
Icons/svgs/cart-0516faa503f650820283aa3a5da5db5d.svg  729 bytes          [emitted]

But when I try to access the file in the browser, I get the following:

[brentdodell]

@gauravtiwari I meant to tag you in the last post.

[brentdodell]

When I run rake assets:precompile, the contents of the SVG is as follows:

// public/packs/Icons/svgs/cart-0516faa503f650820283aa3a5da5db5d.svg
var React = require('react');

function Cart (props) {
    return React.createElement("svg",props,React.createElement("path",{"className":"cart","d":"M704 1536q0 52-38 90t-90 38-90-38-38-90 38-90 90-38 90 38 38 90zm896 0q0 52-38 90t-90 38-90-38-38-90 38-90 90-38 90 38 38 90zm128-1088v512q0 24-16.5 42.5t-40.5 21.5l-1044 122q13 60 13 70 0
 16-24 64h920q26 0 45 19t19 45-19 45-45 19h-1024q-26 0-45-19t-19-45q0-11 8-31.5t16-36 21.5-40 15.5-29.5l-177-823h-204q-26 0-45-19t-19-45 19-45 45-19h256q16 0 28.5 6.5t19.5 15.5 13 24.5 8 26 5.5 29.5 4.5 26h1201q26 0 45 19t19 45z"}));
}

Cart.displayName = "Cart";

Cart.defaultProps = {"width":"1792","height":"1792","viewBox":"0 0 1792 1792"};

module.exports = Cart;

Cart.default = Cart;

That's not correct is it?

My original file was:

<!-- app/javascripts/Icons/svgs/cart.svg -->
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path class="cart" d="M704 1536q0 52-38 90t-90 38-90-38-38-90 38-90 90-38 90 38 38 90zm896 0q0 52-38 90t-90 38-90-38-38-90 38-90 90-38 90 38 38 90zm128-1088v512q0 24-16.5 42.5t-40.5 21.5l-1044 122q13 60 13 70 0 16-24 64h920q26 0 45 19t19 45-19 45-45 19h-1024q-26 0-45-19t-19-45q0-11 8-31.5t16-36 21.5-40 15.5-29.5l-177-823h-204q-26 0-45-19t-19-45 19-45 45-19h256q16 0 28.5 6.5t19.5 15.5 13 24.5 8 26 5.5 29.5 4.5 26h1201q26 0 45 19t19 45z"/></svg>

[gauravtiwari]

@brentdodell - Should be <img src="<%= asset_pack_path('Icons/svgs/cart.svg') %>" />