webpacker: Webpacker fails to find image asset in a subdirectory

I’m not much of a javascript programmer so there is probably a better way to do this, but this is my current work around in case it helps anyone. Basically just restoring the file-loader rule to that of version 5.2.1.

//config/webpack/base.js

const { webpackConfig, rules } = require('@rails/webpacker')

const fileIndex = rules.findIndex(r => r.type === 'asset/resource')
if (fileIndex !== -1) {
  rules[fileIndex] = {
    test: [
      /\.bmp$/,
      /\.gif$/,
      /\.jpe?g$/,
      /\.png$/,
      /\.tiff$/,
      /\.ico$/,
      /\.avif$/,
      /\.webp$/,
      /\.eot$/,
      /\.otf$/,
      /\.ttf$/,
      /\.woff$/,
      /\.woff2$/,
      /\.svg$/
    ],
    exclude: [/\.(js|mjs|jsx|ts|tsx)$/],
    use: [
      {
        loader: 'file-loader',
        options: {
          name(file) {
            if (file.includes('app/packs')) {
              return 'media/[path][name]-[hash].[ext]'
            }
            return 'media/[folder]/[name]-[hash:8].[ext]'
          },
          context: 'app/packs'
        },
      },
    ],
  }
}
module.exports = webpackConfig

I faced the same issue and got it working with webpack’s built-in asset handling (v5), the solution is the contextRelativeKeys flag, which must be set to true and also setting the context path.

Here’s my setup:

Versions:

webpack-assets-manifest@5.0.6
@rails/webpacker@6.0.0-beta.7
webpack@5.39.0

Folder structure:

app/
  webpacker/
     fonts/
     images/
       icons/
     packs/
     styles/
     scripts/

app/config/webpack/base.js:

const path = require('path')
const { webpackConfig, merge } = require('@rails/webpacker')
const WebpackAssetsManifest = require('webpack-assets-manifest')

const manifestPlugin = webpackConfig.plugins.find(r => r instanceof WebpackAssetsManifest)
if (manifestPlugin) {
  manifestPlugin.options.contextRelativeKeys = true // <-- important!
}

const customConfig = {
  context: path.resolve(__dirname, '../../app/webpacker'), // <-- Adjust to your folder structure!
  // ... omitted rest of config
}

module.exports = merge(webpackConfig, customConfig)

With this I get the correct subdirectories in my manifest.json:

"application.js": "/packs/js/application-6f017e22569258b8eb93.js",
"fonts/ObjektivMk2_W_Bd.eot": "/packs/media/images/bd920ee6b47f6c02808a.eot",
"images/icons/notice-alert.svg": "/packs/media/images/782e9f7b586c7677dd9f.svg"
...

Thanks @sled! For anyone else following this and wants to revert to the webpacker-5 mainfest structure you will also need to also use WebpackAssetManifest’s customize option to change the keys

const path = require('path')
const { webpackConfig, merge } = require('@rails/webpacker')
const WebpackAssetsManifest = require('webpack-assets-manifest')

const manifestPlugin =
  webpackConfig.plugins.find(r => r instanceof WebpackAssetsManifest)
if (manifestPlugin) {
  manifestPlugin.options.contextRelativeKeys = true;
  manifestPlugin.options.customize = function(entry) {
    if (entry.key.startsWith('images/')) {
      return {
        key: entry.key.replace(/^images/, 'media/images'),
        value: entry.value
      };
    }
    if (entry.key.startsWith('fonts/')) {
      return {
        key: entry.key.replace(/^fonts/, 'media/fonts'),
        value: entry.value
      };
    }

    return entry;
  };
}

const customConfig = {
  context: path.resolve(__dirname, '../../app/packs'), // Default webpacker setup, old setup was app/javascripts, this is the value from webpacker.yml "source_path"
  // ...rest of your customConfig goes here
}

module.exports = merge(webpackConfig, customConfig)

Fixed in https://github.com/shakacode/shakapacker/pull/47 and released on v6.1.0.

• https://rubygems.org/gems/shakapacker/versions/6.1.0
• https://www.npmjs.com/package/shakapacker

Thanks, @tomdracz! 🎉

Still seeing nested directories get dropped.

I don’t think this change has been proposed as PR yet, I also ran into a different problem, if you have an asset file twice with identical content hash, only one will land in the output, i.e:

app/
  packs/
    images/
       one/a.jpg
       two/a.jpg

manifest.json

  "media/images/one/a.jpg": "/packs/media/images/c88df3297cffe49852ae.jpg",

which means if you have something like image_pack_tag('two/a.jpg') in your views it will crash because it’s missing in the manifest.

Ran into the same problem.

Still seeing nested directories get dropped.

I don’t think this change has been proposed as PR yet, I also ran into a different problem, if you have an asset file twice with identical content hash, only one will land in the output, i.e:

app/
  packs/
    images/
       one/a.jpg
       two/a.jpg

manifest.json

  "media/images/one/a.jpg": "/packs/media/images/c88df3297cffe49852ae.jpg",

which means if you have something like image_pack_tag('two/a.jpg') in your views it will crash because it’s missing in the manifest.

Still seeing nested directories get dropped. For example:

app
  /packs
    /images
      /some_dir
        something.png

Ends up as static/something.png in the manifest. This worked but would love to remove 😃

I would expect static/some_dir/something.png. The spelunking above seems correct to me after having a similar look. Seem unclear to me if change was intentional?

webpacker: 6.0.0-rc.5 webpack: 5.51.1

I’m having the same issue. Looks like this was an issue before, and it was fixed in https://github.com/rails/webpacker/pull/1964 (and https://github.com/rails/webpacker/pull/1973 I guess). The way the rules are set up seems to have significantly changed in 6.x for webpack 5 compatbility, so https://github.com/rails/webpacker/pull/2802 has I think “broken” these original fixes. I believe the change that causes this problem is here.