v2 includes runtimeChunk twice with optimization.runtimeChunk option in webpack v4

[akash5474]

I noticed that my JS was running twice after upgrading to webpack-flush-chunks@2.0.0 when using optimization.runtimeChunk option in webpack v4.

My runtimeChunk bootstrap.js gets included twice in the html

<script type='text/javascript' src='/static/bootstrap.js' defer></script>
<script type='text/javascript' src='/static/Foo.js' defer></script>
<script type='text/javascript' src='/static/bootstrap.js' defer></script>
<script type='text/javascript' src='/static/main.js' defer></script>

I've confirmed that this no longer happens if I remove optimization.runtimeChunk from the webpack config or switch back to webpack-flush-chunks@1.2.3.

Example Repo

https://github.com/akash5474/universal-demo/tree/bug-demo

Changes Made

Forked faceyspacey/universal-demo and made the following changes (akash5474/universal-demo@764c1be and akash5474/universal-demo@fd65e57):

1. Added a console.log("hello world") statement to src/index.js to demonstrate the issue.

2. Updated to the following dependency versions:

"webpack-flush-chunks": "2.0.0",
"extract-css-chunks-webpack-plugin": "3.0.5",
"babel-plugin-universal-import": "3.0.0",
"webpack": "4.12.0",

3. Updated webpack configs to work with new dependency versions

4. Deleted some unnecessary code

Steps to reproduce

git clone -b bug-demo https://github.com/akash5474/universal-demo

cd universal-demo

npm install

npm run start:prod

Open http://localhost:3000 in the browser and open the console.

You will see "hello world" is logged twice.

Viewing the source html you will see bootstrap.js is included twice

This can be resolved by removing the following from webpack client config:

  optimization: {
    runtimeChunk: {
      name: "bootstrap"
    },
  }

However after downgrading to webpack-flush-chunks@1.2.3, bootstrap.js is only included once with the optimization.runtimeChunk option included. This suggests that the problem was introduced in webpack-flush-chunks@2.0.0

Let me know if you have any questions or if I can help in any way. Thanks.

[alexkrautmann]

I can verify this error. My optimization config is:

optimization: {
        runtimeChunk: {
            name: 'bootstrap'
        },
        splitChunks: {
            chunks: 'initial',
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor'
                }
            }
        },
}

And both bootstrap and vendor show up twice from the return of flushChunks.

[slavab89]

I have the same issue and use the same setup.

This is caused because the after assets include the before ones because they are included as part of the entry (which is logical).
I'm not sure what's the impact of just filtering the before assets from the after ones though.

To still be able to work with webpack 4 i'm using my own script to extract the list of files (until a fix will be up)

import { flatten, includes } from 'lodash';

function filesFromChunks(chunkNames, assets, checkChunkNames) {
  const hasChunk = entry => {
    const result = !!assets[entry];
    if (!result && checkChunkNames) {
      console.warn(`Unable to find ${entry} in Webpack chunks.`);
    }

    return result;
  };

  const entryToFiles = entry => assets[entry];

  return [].concat(...chunkNames.filter(hasChunk).map(entryToFiles));
}

export default function chunksMap(clientStats) {
  const publicPath = clientStats.publicPath.replace(/\/$/, '');
  const beforeAssets = filesFromChunks(['bootstrap', 'vendor'], clientStats.assetsByChunkName);
  const afterAssets = filesFromChunks(['main'], clientStats.assetsByChunkName);

  return function flushChunks(chunkNames) {
    const mainAssets = flatten(chunkNames.map(chunkName => clientStats.namedChunkGroups[chunkName].assets));
    const allNeededAssets = [...beforeAssets, ...mainAssets, ...afterAssets];

    const jsAssets = allNeededAssets
      .filter(asset => includes(asset, '.js'))
      .map(file => `<script type='${includes(file, '.map') ? 'application/json' : 'text/javascript'}' src='${publicPath}/${file}' defer></script>`)
      .join('\n');

    return {
      js: jsAssets,
    };
  };
}

That's only for JS files.

[ScriptedAlchemy]

Thanks for finding this! I’ll patch the duplicate

[ScriptedAlchemy]

@slavab89 @akash5474 Ill push a next tag on npm as well

[ScriptedAlchemy]

#62

[ScriptedAlchemy]

on npm, let me know if thats better

[alexkrautmann]

@ScriptedAlchemy I just tried out next and it definitely works for me.

[ScriptedAlchemy]

Fantastic. Apologies for the error! Thank you @akash5474 for reporting it!

Gonna merge this baby

[akash5474]

@ScriptedAlchemy Np and thanks for getting this fixed, working great now. Appreciate all the work you're doing with these libs.