Duplicate CSS files while flushing

swernerx commented 6 years ago

I am migrating a project to use flush chunks. Unfortunately I see duplicate entries for my main CSS assets being generated:

import flushChunks from 'webpack-flush-chunks'
const chunks = flushChunks(clientStats, {
    // TODO: This part should be dynamic later on based on the#
    // chunks which were rendered with the render call just before.
    chunkNames: [ "main" ]
})

When using

return `<head>
  <meta charset="utf-8">
  ${helmet.title.toString()}
  ${helmet.meta.toString()}
  ${helmet.link.toString()}
  ${chunks.styles.toString()}
</head>`

I see the following style rules being added to the head:

<link rel="stylesheet" href="/static/chunk-vendor-eeuzoICW.css">
<link rel="stylesheet" href="/static/chunk-vendor-eeuzoICW.css">
<link rel="stylesheet" href="/static/chunk-vendor-eeuzoICW.css">

This is with Webpack v4, a single "entry", and split chunks instructions for vendor and runtime:

    return {
        mode: isDev ? "development" : "production",
        stats: "minimal",

        entry: [
            resolve("src/@browser/index.js")
        ],

        // You may want 'eval' (in dev) instead if you prefer to see the compiled output in DevTools.
        // See the discussion in https://github.com/facebook/create-react-app/issues/343
        devtool: isDev ? "cheap-module-source-map" : "source-map",

        output: {
            path: resolve(distDirectory),
            publicPath: '/static/',
            hashFunction: Hasher,
            hashDigest: "base52", // A-Za-z
            hashDigestLength: 8,
            filename: isDev ? "bundle-[name].js" : "bundle-[name]-[chunkhash].js",
            chunkFilename: isDev ? "chunk-[name].js" : "chunk-[name]-[chunkhash].js",
            crossOriginLoading: "anonymous"
        },

        optimization: {
            minimize: !isDev,
            runtimeChunk: true,
            splitChunks: {
                cacheGroups: {
                    commons: {
                        test: /[\\/]node_modules[\\/]/,
                        name: 'vendor',
                        chunks: 'all'
                    }
                }
            },
        ....

dashukin commented 6 years ago

@faceyspacey, @ScriptedAlchemy , it seems to be the same issue like the one mentioned in #61

Initial fix for #61 includes takes into consideration first argument passed to _createApiWithCss2, while the second one keeps possibly duplicated.

I was able to replicate the issue on next setup:

    "babel-plugin-universal-import": "^3.0.3",
    "react-universal-component": "^3.0.3",
    "webpack-flush-chunks": "^2.0.1",
    "extract-css-chunks-webpack-plugin": "^3.0.11",

with stats file generated with

    "webpack-stats-plugin": "^0.2.1",

  optimization: {
    splitChunks: {
      chunks: 'async', // async, initial, all
      minSize: 30000,
      minChunks: 1,
      maxInitialRequests: 5,
      maxAsyncRequests: 3,
      automaticNameDelimiter: CHUNKS_NAME_DELIMITER,
      name: false,
      cacheGroups: {
        app: {
          test: /[\\/]@app-common[\\/]/,
          name: 'app',
        },
        cells: {
          test: /[\\/]@cells[\\/]/,
          name: 'cells',
        },
        common: {
          test: /[\\/]@common[\\/]/,
          name: 'common',
        },
        utils: {
          test: /[\\/]@utils[\\/]/,
          name: 'utils',
        },
        vendors: {
          test: /[\\/]@node_modules[\\/]/,
          name: 'vendor',
          priority: -20,
        }
      },
    },
  },

Quick check with adding isUnique call for second argument passed to _createApiWithCss2 in compiled code seems to solve the issue.

// node_modules/webpack-flush-chunks/dist/flushChunks.js:25

  return (0, _createApiWithCss2.default)([].concat(_toConsumableArray(jsBefore), _toConsumableArray(files), _toConsumableArray(jsAfter)).filter(isUnique), [].concat(_toConsumableArray(jsBefore), _toConsumableArray(jsAfter.reverse()), _toConsumableArray(files)).filter(isUnique), stats, opts.outputPath);

before adding:


<link rel='stylesheet' href='/css/chunks/common.90e728aa3054798fe428.css' />
<link rel='stylesheet' href='/css/chunks/app.0686eedf7cedb804bc00.css' />
<link rel='stylesheet' href='/css/main.ccfbbfe1ef5f990ca905.css' />
<link rel='stylesheet' href='/css/chunks/common.90e728aa3054798fe428.css' />
<link rel='stylesheet' href='/css/chunks/app.0686eedf7cedb804bc00.css' />
<link rel='stylesheet' href='/css/chunks/app.0686eedf7cedb804bc00.css' />
<link rel='stylesheet' href='/css/chunks/common.90e728aa3054798fe428.css' />
<link rel='stylesheet' href='/css/chunks/landing.container.c5b76b8c18b56e0d3d70.css' />

and after adding:


<link rel='stylesheet' href='/css/chunks/common.28157dcd2e468c7f4494.css' />
<link rel='stylesheet' href='/css/chunks/app.3bc735b9f7b1db77a218.css' />
<link rel='stylesheet' href='/css/main.a032936feb332b73b7a6.css' />
<link rel='stylesheet' href='/css/chunks/landing.container.c5b76b8c18b56e0d3d70.css' />

GH-73

dashukin commented 6 years ago

@swernerx, GH-73 was merged into 2.0.2 version, could you double check from your side if issue has been fixed?

faceyspacey / webpack-flush-chunks

Duplicate CSS files while flushing #64