search

rails / webpacker

Use Webpack to manage app-like JavaScript modules in Rails
MIT License
5.31k stars 1.47k forks source link

Webpacker 6 rc5 issue #3145

Closed rctneil closed 3 years ago

rctneil commented 3 years ago

Hi,

My app is erroring with the following error:

Webpacker can't find images/neil-and-panda.webp in /Users/neil/Developer/neilsite/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:
{
  "ae.svg": "/packs/static/23c174705b39d649ba43.svg",
  "angry.css": "/packs/css/angry.css",
  "angry.js": "/packs/js/angry.js",
  "application.css": "/packs/css/application.css",
  "application.js": "/packs/js/application.js",
  "au.svg": "/packs/static/932d918261bcbb88f0cc.svg",
  "be.svg": "/packs/static/410c4acc521ec3a59836.svg",
  "cn.svg": "/packs/static/7977e12a9afade492c93.svg",
  "css/angry.css.map": "/packs/css/angry.css.map",
  "css/application.css.map": "/packs/css/application.css.map",
  "css/vendors-node_modules_fullcalendar_core_main_js-node_modules_fullcalendar_daygrid_main_js-node-57fac9.css": "/packs/css/vendors-node_modules_fullcalendar_core_main_js-node_modules_fullcalendar_daygrid_main_js-node-57fac9.css",
  "css/vendors-node_modules_fullcalendar_core_main_js-node_modules_fullcalendar_daygrid_main_js-node-57fac9.css.map": "/packs/css/vendors-node_modules_fullcalendar_core_main_js-node_modules_fullcalendar_daygrid_main_js-node-57fac9.css.map",
  "cy.svg": "/packs/static/bdc1fde27ba14b2afa3b.svg",
  "de.svg": "/packs/static/11d88d2b77e6abe5ebb1.svg",
  "dk.svg": "/packs/static/f4e8fc5376a202f1d771.svg",
  "entrypoints": {
    "angry": {
      "assets": {
        "js": [
          "/packs/js/runtime.js",
          "/packs/js/vendors-node_modules_webpack-dev-server_client_index_js_protocol_ws_3A_hostname_localhost_por-68cb50.js",
          "/packs/js/angry.js"
        ],
        "css": [
          "/packs/css/angry.css"
        ]
      }
    },
    "application": {
      "assets": {
        "js": [
          "/packs/js/runtime.js",
          "/packs/js/vendors-node_modules_webpack-dev-server_client_index_js_protocol_ws_3A_hostname_localhost_por-68cb50.js",
          "/packs/js/vendors-node_modules_fullcalendar_core_main_js-node_modules_fullcalendar_daygrid_main_js-node-57fac9.js",
          "/packs/js/application.js"
        ],
        "css": [
          "/packs/css/vendors-node_modules_fullcalendar_core_main_js-node_modules_fullcalendar_daygrid_main_js-node-57fac9.css",
          "/packs/css/application.css"
        ]
      }
    }
  },
  "es.svg": "/packs/static/b3825b28f7a64779d80d.svg",
  "fi.svg": "/packs/static/eb793b740dd4fa0f8b63.svg",
  "fr.svg": "/packs/static/81d43a151d8bc64145f2.svg",
  "gb.svg": "/packs/static/35dbacd736781608964a.svg",
  "hk.svg": "/packs/static/5a1122079f786b82c2ed.svg",
  "ie.svg": "/packs/static/1b0ac4e772c2e62aef2f.svg",
  "jp.svg": "/packs/static/980c12c54fe225923434.svg",
  "js/angry.js.map": "/packs/js/angry.js.map",
  "js/application.js.map": "/packs/js/application.js.map",
  "js/runtime.js.map": "/packs/js/runtime.js.map",
  "js/vendors-node_modules_fullcalendar_core_main_js-node_modules_fullcalendar_daygrid_main_js-node-57fac9.js": "/packs/js/vendors-node_modules_fullcalendar_core_main_js-node_modules_fullcalendar_daygrid_main_js-node-57fac9.js",
  "js/vendors-node_modules_fullcalendar_core_main_js-node_modules_fullcalendar_daygrid_main_js-node-57fac9.js.map": "/packs/js/vendors-node_modules_fullcalendar_core_main_js-node_modules_fullcalendar_daygrid_main_js-node-57fac9.js.map",
  "js/vendors-node_modules_hotwired_turbo-rails_node_modules_rails_actioncable_src_index_js.chunk.js": "/packs/js/vendors-node_modules_hotwired_turbo-rails_node_modules_rails_actioncable_src_index_js.chunk.js",
  "js/vendors-node_modules_hotwired_turbo-rails_node_modules_rails_actioncable_src_index_js.chunk.js.map": "/packs/js/vendors-node_modules_hotwired_turbo-rails_node_modules_rails_actioncable_src_index_js.chunk.js.map",
  "js/vendors-node_modules_webpack-dev-server_client_index_js_protocol_ws_3A_hostname_localhost_por-68cb50.js": "/packs/js/vendors-node_modules_webpack-dev-server_client_index_js_protocol_ws_3A_hostname_localhost_por-68cb50.js",
  "js/vendors-node_modules_webpack-dev-server_client_index_js_protocol_ws_3A_hostname_localhost_por-68cb50.js.map": "/packs/js/vendors-node_modules_webpack-dev-server_client_index_js_protocol_ws_3A_hostname_localhost_por-68cb50.js.map",
  "my.svg": "/packs/static/0d298a9e4566332f8a84.svg",
  "nl.svg": "/packs/static/f9d570ec865ab2c1e9d4.svg",
  "no.svg": "/packs/static/266dbd6fc3e66414aa3c.svg",
  "runtime.js": "/packs/js/runtime.js",
  "se.svg": "/packs/static/4984ae470ed69178af1d.svg",
  "sg.svg": "/packs/static/9751741f84e6e5263a40.svg",
  "static/ae.svg": "/packs/static/2c530f6449f3e5abd04b.svg",
  "static/angle.svg": "/packs/static/25f8a26f919b8e36af17.svg",
  "static/apple-messages.svg": "/packs/static/e7757a5a00ecd59886a3.svg",
  "static/application.svg": "/packs/static/3552a8b67f1ecb6623d2.svg",
  "static/au.svg": "/packs/static/5b98a120aeec3f5a1aeb.svg",
  "static/backblaze.svg": "/packs/static/617c0d2b1e6a5fa38981.svg",
  "static/be.svg": "/packs/static/914a3c37d1998aa1f6b0.svg",
  "static/bright_squares.png": "/packs/static/af16926a0c8570d44e0e.png",
  "static/calendar.svg": "/packs/static/ea87db5c00a4b399c2d5.svg",
  "static/castle.svg": "/packs/static/2b6a9e47d515570a940a.svg",
  "static/chevron-down.svg": "/packs/static/8eea6e8ef042cbbc83bd.svg",
  "static/chevron-left.svg": "/packs/static/aa1ea29bde0a2e7eac5f.svg",
  "static/chevron-right.svg": "/packs/static/a013b3505427f9099c2f.svg",
  "static/chevron-up.svg": "/packs/static/a51530cad3086cb6ae5f.svg",
  "static/cn.svg": "/packs/static/f5a6f048eb8367343bd4.svg",
  "static/coaster-count_square_inverted.svg": "/packs/static/c131c62d4d756fcc3eb1.svg",
  "static/coaster.svg": "/packs/static/a569a589e15cb80bfa38.svg",
  "static/coffee.svg": "/packs/static/27071d4dbe8f08d04e86.svg",
  "static/cy.svg": "/packs/static/70de54e68d8683969410.svg",
  "static/dark-mode--dark.svg": "/packs/static/69c00dd83c92b9c95d22.svg",
  "static/dark-mode.svg": "/packs/static/ef44fdfa1505c3cfff0f.svg",
  "static/de.svg": "/packs/static/7e82f4c71df5fc78abbb.svg",
  "static/default-skin.png": "/packs/static/69fadb7811b329030d52.png",
  "static/default-skin.svg": "/packs/static/03f167719dc909cd8c77.svg",
  "static/dk.svg": "/packs/static/c2e570fa503242ab4c3e.svg",
  "static/es.svg": "/packs/static/1a25a96e26fcca676c08.svg",
  "static/facebook--white--square.svg": "/packs/static/17405c4099082e084d3e.svg",
  "static/facebook-messenger-code-nt.jpg": "/packs/static/d81ea27a41802947b164.jpg",
  "static/facebook-messenger-code-nt.webp": "/packs/static/27ae8215f8faf5b35cdb.webp",
  "static/ferris-wheel.svg": "/packs/static/232302a0e733b8cc4a98.svg",
  "static/fi.svg": "/packs/static/3b522e7f272eee4009b2.svg",
  "static/flickr--white--square.svg": "/packs/static/17a3eb2ae1c48bd5770a.svg",
  "static/fr.svg": "/packs/static/c88df3297cffe49852ae.svg",
  "static/gallery-feature-bg.jpg": "/packs/static/7e07729b8c1d8a057655.jpg",
  "static/gallery-feature-bg.png": "/packs/static/d956ac5927346cc50c9b.png",
  "static/gb.svg": "/packs/static/ba1c7f5df0dd4173c951.svg",
  "static/generic-theme-park-logo.svg": "/packs/static/44b4135e41662dc4585f.svg",
  "static/github.svg": "/packs/static/2969c6cf4532fa58ca7f.svg",
  "static/grannyt.jpg": "/packs/static/cae6c0f96c0ccf6f846c.jpg",
  "static/height.svg": "/packs/static/821ad5fe62172d83d8b2.svg",
  "static/hk.svg": "/packs/static/c0a93c089256c99bf337.svg",
  "static/icon-ferris-wheel.svg": "/packs/static/510f910404bd8b5ca308.svg",
  "static/icon-filter.svg": "/packs/static/08521f0a2a8466ec3025.svg",
  "static/icon-marker.svg": "/packs/static/4f3c556982f9e22e53e7.svg",
  "static/icon-maximise.svg": "/packs/static/41b1712b9418a12ef8bc.svg",
  "static/icon-menu.svg": "/packs/static/8f2b877e5e16b45a9969.svg",
  "static/icon-minimise.svg": "/packs/static/0fe40c0d043280b86eaf.svg",
  "static/icon-next.svg": "/packs/static/0b5783e38159b12fff69.svg",
  "static/icon-plus.svg": "/packs/static/c7618f926fbdaf41cc54.svg",
  "static/icon-prev.svg": "/packs/static/f1c17ec7a50d344790ba.svg",
  "static/icon-roller-coaster.svg": "/packs/static/599be48623802716c472.svg",
  "static/icon-search.svg": "/packs/static/064128103b6dd5f517ef.svg",
  "static/icon-sort.svg": "/packs/static/fc3fa231e37f981aeb77.svg",
  "static/icon-star.svg": "/packs/static/bb4b87e643967c1e5405.svg",
  "static/icon_04.svg": "/packs/static/dca6df822dbdaea623c5.svg",
  "static/ie.svg": "/packs/static/5ecf710f14d859cbceb6.svg",
  "static/inversion.svg": "/packs/static/4efde21d50c93962f020.svg",
  "static/javascript.svg": "/packs/static/16ae7d803f5ce5ae5a69.svg",
  "static/jp.svg": "/packs/static/19c631c1498ba5517cd5.svg",
  "static/ko-fi.svg": "/packs/static/e945d1b4c6458f73b862.svg",
  "static/length.svg": "/packs/static/c02c77945c46eaaca154.svg",
  "static/logo-bourbon.svg": "/packs/static/f484b6ae1940d467ca78.svg",
  "static/logo-css.svg": "/packs/static/cc47d65ad9f5bdd1f211.svg",
  "static/logo-css3.svg": "/packs/static/d7827b9b20009d4292d5.svg",
  "static/logo-digital-ocean.svg": "/packs/static/9aae32819dd71d738b68.svg",
  "static/logo-elastic-search.svg": "/packs/static/5eb07fe5a40c956fc89c.svg",
  "static/logo-elasticsearch.svg": "/packs/static/0220e3fe4d9bc2e36269.svg",
  "static/logo-facebook.svg": "/packs/static/3bbd23ee8f68bb8541a0.svg",
  "static/logo-flickr.svg": "/packs/static/c02b63004af419363bc9.svg",
  "static/logo-google-plus.svg": "/packs/static/c5ad21879259121f8ba4.svg",
  "static/logo-grunt.svg": "/packs/static/da5d65010efdc466fbff.svg",
  "static/logo-gulp.svg": "/packs/static/bf812025c1d7d3319123.svg",
  "static/logo-html.svg": "/packs/static/ffdf295f1b086263548d.svg",
  "static/logo-html5.svg": "/packs/static/a891d5cb20857ecd6f8d.svg",
  "static/logo-jquery.svg": "/packs/static/ac1a0f515465f6b3f255.svg",
  "static/logo-lightroom.svg": "/packs/static/8e2d47ddd1242242cf4f.svg",
  "static/logo-rails.svg": "/packs/static/02c53c2598df754a069a.svg",
  "static/logo-rcdb.svg": "/packs/static/d3a5cfec2d1b83cd5fc1.svg",
  "static/logo-ruby.svg": "/packs/static/d95665bfc0dc4d184334.svg",
  "static/logo-sass-s.svg": "/packs/static/fac3944a429130555478.svg",
  "static/logo-sass.svg": "/packs/static/641c0a54168f9aff4e27.svg",
  "static/logo-skype.svg": "/packs/static/0e3e822b18d7869132ee.svg",
  "static/logo-susy.svg": "/packs/static/f19ba2b9729c2ef7aa21.svg",
  "static/logo-telegram.svg": "/packs/static/84e4d7a6e832c36f2545.svg",
  "static/logo-twitter.svg": "/packs/static/3315ff43716d444037ae.svg",
  "static/logo-webpack.svg": "/packs/static/81d00ecb018c6878df96.svg",
  "static/missed-coaster.svg": "/packs/static/8abdceb2a4c6f2a2cabd.svg",
  "static/my.svg": "/packs/static/848fbf91865a8d191263.svg",
  "static/neil-and-panda.jpg": "/packs/static/5256cbc850c1ba4b205c.jpg",
  "static/neil-and-panda.webp": "/packs/static/4b23518213806837f014.webp",
  "static/neil-kiddie-coaster.jpg": "/packs/static/e023340c5ac4c060e69b.jpg",
  "static/neil-t-extended.svg": "/packs/static/28b83c6b3ad3347e5af8.svg",
  "static/neil-t-caricature-edit.svg": "/packs/static/7c29760b38b71a201edb.svg",
  "static/neil-t-caricature.svg": "/packs/static/12e9b6cc80066d7c1547.svg",
  "static/neil-zorb.jpg": "/packs/static/25efb41460b108033a10.jpg",
  "static/neil_photo.png": "/packs/static/4e1fe99c16fe48fd2f0f.png",
  "static/new-pattern.svg": "/packs/static/5fa3af912e527ca81213.svg",
  "static/nl.svg": "/packs/static/21eb77dcfa38c6d7bb81.svg",
  "static/no.svg": "/packs/static/6df96bb22557028a5f77.svg",
  "static/nts-logo.svg": "/packs/static/5a62d544004f05005019.svg",
  "static/paper-plane.svg": "/packs/static/75d6334fab17c329f198.svg",
  "static/park.svg": "/packs/static/1f1afdd7c6934c5bc6c1.svg",
  "static/pattern-dark.svg": "/packs/static/d7b16acf3c7ea4b1ae1f.svg",
  "static/pattern-light.svg": "/packs/static/bbc2eebafbfa93deebaf.svg",
  "static/pause.svg": "/packs/static/27ca806dfc903bf2d240.svg",
  "static/photos.svg": "/packs/static/898181fdb77e4a7cf7bb.svg",
  "static/photos2.svg": "/packs/static/8df55513ae4fc2a245d7.svg",
  "static/placeholder.jpg": "/packs/static/cdfebd8e82adcd8a7329.jpg",
  "static/play.svg": "/packs/static/66c48805896af8196032.svg",
  "static/preloader.gif": "/packs/static/14d740b6ee64510747b0.gif",
  "static/se.svg": "/packs/static/22333e71c0c3e3d8da11.svg",
  "static/search.svg": "/packs/static/da3387c778acce887e67.svg",
  "static/send.svg": "/packs/static/0940ec9e746d725d91b0.svg",
  "static/sg.svg": "/packs/static/e6a27ad3fc2dedabca8b.svg",
  "static/skype--white--square.svg": "/packs/static/3cc23900aef1cfe8fc1f.svg",
  "static/sort-down.svg": "/packs/static/2ff80736654562ff329a.svg",
  "static/speed.svg": "/packs/static/680bef7bec610ab39fd3.svg",
  "static/star.svg": "/packs/static/5dae92e6c28ac10937c3.svg",
  "static/stats.svg": "/packs/static/af05cf5f967f1981482f.svg",
  "static/suitcase.svg": "/packs/static/48ff15d87f73e9bfd8d1.svg",
  "static/tag.svg": "/packs/static/195d94c2f3ad10e80f8d.svg",
  "static/tardis-coloured.svg": "/packs/static/3062d158336cc444ce21.svg",
  "static/tardis.svg": "/packs/static/88b6da680688f506d17e.svg",
  "static/telegram--white--square.svg": "/packs/static/37e2a364c479a17c6a73.svg",
  "static/tw.svg": "/packs/static/83324ef79fd96b77a609.svg",
  "static/twitter--square.svg": "/packs/static/b9d8401fd65cf2733c2c.svg",
  "static/us.svg": "/packs/static/c95087e1a852cf730acc.svg",
  "static/whatsapp--white--square.svg": "/packs/static/12a732d45746bdb40fb6.svg",
  "tw.svg": "/packs/static/a72a85cb06aca393b4c6.svg",
  "us.svg": "/packs/static/3cc0d38b3e8d93132c90.svg"
}

The appropriate part of my view is:

                <div class="home-intro__photo">
                    <picture>
                        <source srcset="<%= asset_pack_path('images/neil-and-panda.webp') %>" type="image/webp">
                        <source srcset="<%= asset_pack_path('images/neil-and-panda.jpg') %>" type="image/jpeg">
                        <img src="<%= asset_pack_path('images/neil-and-panda.jpg') %>" width="500" height="500" alt="Photo of Neil with a Panda at the Chengdu Panda Sanctuary when in Chengdu, China">
                    </picture>
                </div>

My webpacker.yml file is:

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/packs
  source_entry_path: entrypoints
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/webpacker
  webpack_compile_output: true

  # Additional paths webpack should look up modules
  # ['app/assets', 'engine/foo/app/assets']
  additional_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    # Hot Module Replacement updates modules while the application is running without a full reload
    hmr: false
    client:
      # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
      overlay: true
      # May also be a string
      # webSocketURL:
      #  hostname: "0.0.0.0"
      #  pathname: "/ws"
      #  port: 8080
    # Should we use gzip compression?
    compress: true
    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
    allowed_hosts: "all"
    pretty: true
    headers:
      'Access-Control-Allow-Origin': '*'
    static:
      watch:
        ignored: '**/node_modules/**'

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

I have webpack-dev-server running in the background.

I'd appreciate some guidance here as this has been bugging me for a while now.

Thanks, Neil

usmanchaudhryme commented 3 years ago

@rctneil For me all images now work with -> static/. So to access you can try out this path: static/neil-and-panda.webp instead of images/neil-and-panda.webp.

Hint: Check the manifest.json file to see the paths.

rctneil commented 3 years ago

@usmanchaudhryme Ok. Why do some files in the manifest have static pretended and others don't? It doesn't appear to be logical etc?

rctneil commented 3 years ago

@usmanchaudhryme Why is the "static" prefix used anyway? There doesn't;t appear to be a mention of it anywhere in the docs or readme? Surely this is not right? What if I had two files in different subfolders with the same name?

fidalgo commented 3 years ago

I've solved this by adding/uncommenting these lines in app/packs/entrypoints/application.js

const images = require.context("../images", true);
const imagePath = (name) => images(name, true);

Then if you have an image at app/packs/images/logo.svg you just need to use the helper <%= image_pack_tag 'logo.svg' %> in the views.

mcmire commented 3 years ago

This is an intentional change. Previously the prefix was media/images in the pre releases and got changed to static in rc1. There is a reference to this in the changelog, but I agree that a blurb about it should be added to the README (or at the very least the v6 upgrade doc), because it seems like this has confused people (see #2859).

justin808 commented 3 years ago

@guillaumebriday Suggest closing.