Getting broken manifest generated .. scss files mapping to png, ttf, woff

[cameronbraid]

version 2.2.0 webpack 4.41.2 mini-css-extract-plugin 0.8.0

part of manifest :

cat dist/manifest-5.4.9.json|grep scss
  "nitro-common.scss": "https://www.drivenow.com.au/webdata/nitro/turboiconfont-webfont-dff16c533467fba9f5f98be6509cb3e8.ttf",
  "RecordManager.scss": "https://www.drivenow.com.au/webdata/nitro/outline-icons-ef60a4f6c25ef7f39f2d25a748dbecfe.woff",
  "mobile.scss": "https://www.drivenow.com.au/webdata/nitro/receipt-perforation-3d56433a66ba84d84b19dbd2bb613b88.png",
  "landing.scss": "https://www.drivenow.com.au/webdata/nitro/info-bg-airport-adaf20c33cffe620622980eae7d13a37.png",
  "bootstrap.scss": "https://www.drivenow.com.au/webdata/nitro/glyphicons-halflings-regular-fa2772327f55d8198301fdb8bcfc8158.woff",

I found that webpack-assets-manifest fixed a similar bug https://github.com/webdeveric/webpack-assets-manifest/issues/39 fixed in https://github.com/webdeveric/webpack-assets-manifest/pull/40

[cameronbraid]

A locally patched version applying the same fix appears to fix it :

changing moduleAsset to :

  var moduleAsset = function (loaderContext, module) {
    const emitFile = loaderContext.emitFile;
    loaderContext.emitFile = (name, content, sourceMap) => {
      moduleAssets[name] = path.join(
        path.dirname(name),
        path.basename(module.userRequest)
      );
      return emitFile.call(module, name, content, sourceMap);
    };
  };

and

changing compilation.hooks.moduleAsset to compilation.hooks.normalModuleLoader

results in no scss entries in the manifest and correct values for the ttf files etc..

  "turboiconfont-webfont.svg": "https://www.drivenow.com.au/webdata/nitro/turboiconfont-webfont-3b5e81f74bffde1c174c0dd2e298eac5.svg",
  "turboiconfont-webfont.eot": "https://www.drivenow.com.au/webdata/nitro/turboiconfont-webfont-5c87f74d71b93a54720c240baabee897.eot",
  "turboiconfont-webfont.woff": "https://www.drivenow.com.au/webdata/nitro/turboiconfont-webfont-dc8c4e2db2e54a5d58a3dc58b05be578.woff",
  "turboiconfont-webfont.ttf": "https://www.drivenow.com.au/webdata/nitro/turboiconfont-webfont-dff16c533467fba9f5f98be6509cb3e8.ttf",

[cameronbraid]

I implemented a fork which resolves my issue, but breaks 1 test case

[coreyworrell]

Also experiencing this issue.

[smilingkite]

I have the same issue with CSS files.

{
  "index.css": "index.25cb1dbd983ae48daaff.css",
  "default.css": "wand.png?62a925af59561ea618a98a477b4a1585",
  "fonts/default.css": "fonts/roboto-v19-latin_latin-ext-regular.woff2",
  "overwrite.css": "ui-icons_333333_256x240.png?548a05af48ef6545db2fd999b12ca937"
}

It looks like these are files the css files use. It looks like the css itself gets built into one root css file that was defined in webpack.config.js:

module.exports = {
    entry: {
        'index': './index.js',
    },
...
plugins: [
    new MiniCssExtractPlugin({
        filename: '[name].[contenthash].css'
    }),

And in index.js:

import './css/default.css';
import './css/overwrite.css';
import './css/print.css';

Where print.css is not included in the manifest file, which makes (a sort of) sense, because it doesn't reference images.

In other words: this may be intended behavior.

[szegheo]

Same here. I have 2 entry points: index.js and vendors.js. I use css-loader and file-loader to copy+version the images/fonts found in my css files to the build directory and rewrite url()-s to them in the final css, then MiniCssExtractPlugin to extract css files.

The file vendors.js imports some css vendor packages and some of them have image references.

Here's the (wrong) generated manifest json:

{
  "/assets/build/index.css": "/assets/build/index.519adaf6.css",
  "/assets/build/index.js": "/assets/build/index.895c45a4.js",
  "/assets/build/index.css.map": "/assets/build/index.519adaf6.css.map",
  "/assets/build/index.js.map": "/assets/build/index.895c45a4.js.map",

  "/assets/build/vendors.css": "/assets/build/ec161a74448ccf2c18beefe8cca2b44a.svg",

  "/assets/build/vendors.js": "/assets/build/vendors.9b920610.js",
  "/assets/build/vendors.css.map": "/assets/build/vendors.4330fee9.css.map",
  "/assets/build/vendors.js.map": "/assets/build/vendors.9b920610.js.map"
}

As it sees, vendors.css has wrong value. It holds the last asset (see the output below) handled by file-loader:

Since I only need the chunks (js and exported css files) in the manifest file, my workaround is the plugin's filter option (see its documentation here):

    filter: (FileDescriptor) => {
      // fix for file-loader imported assets
      return FileDescriptor.isChunk;
    }

However I'm not really sure if it's safe, but all seems working fine: "/assets/build/vendors.css": "/assets/build/vendors.4330fee9.css"

[jorenvanhee]

I also had this issue when using file-loader and an svg image as background-image in my css. I temporarily fixed it by excluding svgs from the manifest.

new ManifestPlugin({
  publicPath: '',
  filter: (file) => {
    return !file.path.endsWith('.svg');
  },
}),

[jtwee]

Is this being worked on at all? It's causing a lot of headaches for me trying to setup a manifest in a new project.

[gusevda]

I have the same issue

[shellscape]

Note: The original post for this issue is likely a duplicate of #167

Hey all! I've taken over maintenance of the plugin and am doing some housecleaning. For Issues over a year old without a reproduction, we're going to go the route of closing them first. However, they're not dead! If the issue is still pending and still a problem, please reply with a reproduction and we'll reopen post-haste.

Please provide a reproduction by choosing one of the options below:

1. Using the REPL.it plugin reproduction template at https://repl.it/@shellscape/manifest-plugin-repro

2. Provide a minimal repository link (Read https://git.io/fNzHA for instructions). Please use NPM for installing dependencies! These may take more time to triage than the other options.

   ⚠️ ZIP Files are unsafe and maintainers will NOT download them.