faceyspacey / faceyspacey/webpack-flush-chunks

Duplicate CSS files while flushing

Open
#64 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
354
Forks
30
PR merge metrics
No merged PRs in 30d

Description

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

```js
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

```js
return `

${helmet.title.toString()}
${helmet.meta.toString()}
${helmet.link.toString()}
${chunks.styles.toString()}
`
```

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

```html

```

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

```js
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'
}
}
},
....
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the shown flushChunks call with the Webpack 4 configuration, then trace how chunks.styles is assembled from the generated vendor and runtime chunks. Compare the emitted asset list with the rendered HTML; done means each CSS asset is included only once.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, webpack
Domain
build-system
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.