Manifest Plugin is not including all folders on --watch

[jasonwilliams]

Webpack Version Webpack 4.6.0

webpack-manifest-plugin Version

webpack-manifest-plugin@^2.0.0-rc.2:
  version "2.0.0"

copy-webpack-plugin version

copy-webpack-plugin@^4.5.1:
  version "4.5.1"

Link to webpack config https://gist.github.com/jasonwilliams/60680ffa363ab9c86166f3cc4c86dc9f

Desc When using these 2 plugins together on build they seem to work well, i get a full manifest. But when using in --watch mode, the vendor files don't seem to be added :(

Here is the results from the full build

{
  "listen.js": "js/listen.f22c5b9fb716ec45b423.js",
  "listen.css": "css/listen.31a7b45ed23184da32a4.css",
  "listen.js.map": "js/listen.f22c5b9fb716ec45b423.js.map",
  "listen.css.map": "css/listen.31a7b45ed23184da32a4.css.map",
  "play.js": "js/play.850a763a8bd980b76d07.js",
  "play.css": "css/play.31a7b45ed23184da32a4.css",
  "play.js.map": "js/play.850a763a8bd980b76d07.js.map",
  "play.css.map": "css/play.31a7b45ed23184da32a4.css.map",
  "js/vendor/react-redux.js": "js/vendor/react-redux.1b10249be8.js",
  "js/vendor/redux.js": "js/vendor/redux.bd26d59a87.js",
  "js/vendor/react.js": "js/vendor/react.20dbe1f623.js",
  "js/vendor/react-modal.js": "js/vendor/react-modal.100c892e9b.js",
  "js/vendor/axios.js": "js/vendor/axios.66d856181b.js",
  "js/vendor/react-dom.js": "js/vendor/react-dom.ef9d735068.js",
  "js/cap-web-components.js": "js/cap-web-components.9b28ae7111.js",
  "img/favicon.ico": "img/favicon.ico",
  "img/track.png": "img/track.png",
  "img/beta_logo.svg": "img/beta_logo.svg"
}

however on --watch i only get this output in the manifest output

{
  "listen.js": "js/listen.f22c5b9fb716ec45b423.js",
  "listen.css": "css/listen.b5f1f039f27b532dc2d1.css",
  "listen.js.map": "js/listen.f22c5b9fb716ec45b423.js.map",
  "listen.css.map": "css/listen.b5f1f039f27b532dc2d1.css.map",
  "play.js": "js/play.850a763a8bd980b76d07.js",
  "play.css": "css/play.b5f1f039f27b532dc2d1.css",
  "play.js.map": "js/play.850a763a8bd980b76d07.js.map",
  "play.css.map": "css/play.b5f1f039f27b532dc2d1.css.map"
}

I'm not sure whether the problem lies in the copy plugin or within this manifest plugin. When i check the files in vendor they are there and hashed, so it looks like the manifest doesn't pick these up on watch. Do you have any idea why this happens?

Comment from https://github.com/webpack-contrib/copy-webpack-plugin/issues/104

@jasonwilliams Should be fix it danethurber/webpack-manifest-plugin#141 first and when i implement support webpack-manifest-plugin by default

Is this issue related to https://github.com/danethurber/webpack-manifest-plugin/issues/141 ?

[mastilver]

Can you try using danethurber/webpack-manifest-plugin#80c01c5dd2aac751ea49bfa1b9ddac26fc35bf44

I think I might have introduced that in https://github.com/danethurber/webpack-manifest-plugin/pull/140 :/

[jasonwilliams]

@mastilver that patch didn't work unfortunately :( it actually made things a lot worse haha, my imgs folder was missing and it seems to hardcode to manifest.json, but my vendor modules weren't in there. Even on first build

[mastilver]

:O how is that possible...?

140 is the only difference between 80c01c5dd2aac751ea49bfa1b9ddac26fc35bf44 and v2.0.0...

Did you try v2.0.1 by any chances

[jasonwilliams]

@mastilver i think i replaced webpack-copy-plugin instead of webpack-manifest-plugin My bad, ill try again in a minute

[jasonwilliams]

@mastilver ok take 2, i've just tried your fix and it seems to work fine now The vendor files remain in the manifest Thanks!

When do we get to see this arrive in a version?

[mastilver]

So just to confirm, you are using https://github.com/danethurber/webpack-manifest-plugin/commit/80c01c5dd2aac751ea49bfa1b9ddac26fc35bf44, right?

Well, I haven't fixed it yet... :/ Expect reverting https://github.com/danethurber/webpack-manifest-plugin/commit/10217a671d5fc175770140a35159b05a4df1f4dd I have no idea yet how to solve that issue

[mastilver]

Oh actually, as a workaround, if you set the seed options to {}, it should work

[jasonwilliams]

My yarn.lock

webpack-manifest-plugin@danethurber/webpack-manifest-plugin#80c01c5dd2aac751ea49bfa1b9ddac26fc35bf44:
  version "2.0.0-rc.2"
  resolved "https://codeload.github.com/danethurber/webpack-manifest-plugin/tar.gz/80c01c5dd2aac751ea49bfa1b9ddac26fc35bf44"
  dependencies:
    fs-extra "^0.30.0"
    lodash ">=3.5 <5"
    tapable "^1.0.0"

[jasonwilliams]

Oh actually, as a workaround, if you set the seed to {}, it should work

ok, we will give this a try and let you know

[m-ermolaev]

Oh actually, as a workaround, if you set the seed to {}, it should work

@mastilver it works! When will it be included in the new version?

[smaximov]

Oh actually, as a workaround, if you set the seed options to {}, it should work

It seems to work for me, thanks!

[mastilver]

I think it will be a breaking chance, so it will be available on V3 I don't have any timeline yet

[chrisfinch]

@jasonwilliams can you confirm which version of webpack-manifest-plugin you're now using please?

I'm trying to apply @mastilver 's workaround of seed: {} but my manifest still misses copied files after the initial build.

Here's my config snippet:

plugins: [
    // ... //
new CopyWebpackPlugin([
    {
        from: path.resolve(
            __dirname,
            'src/lib/js-lib/modernizr-custom.js'
        ),
        to: DEV_MODE
            ? 'modernizr.js'
            : 'modernizr.[md5:hash:hex:20].js',
        toType: 'template'
    }
]),
new ManifestPlugin({
    publicPath: `${ASSET_URL_PATH}/`,
    seed: {},
    /* generate manifest file with mapping from file name to hashed generated file location */
    generate: (seed, files) => {
        seed['js'] = {};
        seed['css'] = {};

        const RX_JS = /.js$/;
        const RX_CSS = /.css$/;

        return files.reduce((manifest, { name, path }) => {
            name = name.replace(/\.[a-f0-9]{20}\./, '.');

            if (name.match(RX_JS)) {
                return {
                    ...manifest,
                    js: {
                        ...manifest.js,
                        [name.replace(RX_JS, '')]: path
                    }
                };
            } else if (name.match(RX_CSS)) {
                return {
                    ...manifest,
                    css: {
                        ...manifest.css,
                        [name.replace(RX_CSS, '')]: path
                    }
                };
            } else return { ...manifest, [name]: path };
        }, seed);
    }
}),
    // ... //
]

Versions:

"webpack": "^4.12.0", "webpack-manifest-plugin": "2.0.0-rc.2", "copy-webpack-plugin": "^4.5.1",

Any help would be appreciated @mastilver @jasonwilliams - thanks

[mastilver]

@chrisfinch I don't think this is related, Can you open a new issue

This issue is talking about files disappearing after a watch was triggered, not files missing on initial build

[chrisfinch]

@mastilver sorry maybe my comment wasn't clear - I am getting the same issue:

• Initial build works fine and files appear correctly
• Subsequent builds afterwards are missing files that were copied with copy-webpack-plugin

It's the same issue as above.

[chrisfinch]

Have also just now tried the following versions of webpack-manifest-plugin without any luck:

danethurber/webpack-manifest-plugin#80c01c5dd2aac751ea49bfa1b9ddac26fc35bf44 2.0.0-rc.2 2.0.0 2.0.1 2.0.2 2.0.3

[mastilver]

Yeah, I believe it's an issue with your code, try removing

        seed['js'] = {};
        seed['css'] = {};

[chrisfinch]

@mastilver seems like you're correct!

Thanks for the help and apologies for taking your time with this - good work on the plugin 👍

[chestozo]

@chrisfinch thank you had the same issue with a file that was copied using copy-webpack-plugin. It was present after webpack has started in watch mode but after any rebuild - it was lost.

In my case the problem was that the seed object was not reused in generate function:

before:

new ManifestPlugin({
    fileName: './assets-config.json',
    filter: (chunk) => /\.(js|css)$/.test(chunk.name),
    generate: (seed, files) => {
        return files.reduce((manifest, file) => { ... }, {
            paths: {},
            entries: {}
        });
    }
})

after:

new ManifestPlugin({
    seed: {
        paths: {},
        entries: {}
    },
    fileName: './assets-config.json',
    filter: (chunk) => /\.(js|css)$/.test(chunk.name),
    generate: (seed, files) => {
        return files.reduce((manifest, file) => { ... }, seed);
    }
})

[akatechis]

To make it clear for anyone facing this (or a similar issue) with copy-webpack-plugin and webpack-manifest-plugin, here's a brief outline of how it manifested for me, and the solution:

The Issue

I suspect that others, like myself, see the files.reduce(...) bit in the generate example, and assume that it's called as a pure function. The intended usage is to modify the object that is passed in as the seed parameter directly. In my case, I was making a copy using const manifest = { ...seed } in my generate function, and return that object.

While this works for the initial build, subsequent builds will only notify the plugin of the files that have changed. For this reason, you must use the seed parameter to get a consistent manifest file.

The fix (for me)

1. Provide the seed config parameter when you construct the manifest plugin, so that it has the desired shape:

   new ManifestPlugin({
   seed: { assets: {}, brands: {} },
   //...
   })

2. Change your generate function to directly modify the seed parameter:

   generate (seed, files) {
   files.forEach(f => {
   seed.assets[f.name] = f.path
   })
   return seed
   }

I'm unsure if omitting return seed will break anything, but on subsequent builds, you will see that seed has the contents of the manifest as of the previous build, so if there are any files missing from the files array, you can assume they haven't changed.

[shellscape]

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.