{"id":20765,"library":"webpack-flush-chunks","title":"webpack-flush-chunks","description":"Server-side utility to flush Webpack chunks for SSR with React Loadable or similar packages (e.g., react-universal-component). Current version is 2.0.3 (last released Oct 2018, appears to be in maintenance mode with no recent updates). It extracts CSS and JS chunks rendered on the server and returns them as string tags for injection in the HTML response. Key differentiators: supports Webpack 4 aggressive code splitting, works with chunkNames or moduleIds, and integrates seamlessly with babel-plugin-universal-import. Compared to alternatives like react-loadable's own server-side logic, this library provides more flexibility for complex chunking strategies.","status":"maintenance","version":"2.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/faceyspacey/webpack-flush-chunks","tags":["javascript","typescript"],"install":[{"cmd":"npm install webpack-flush-chunks","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-flush-chunks","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-flush-chunks","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for type definitions and usage with React SSR.","package":"react","optional":false}],"imports":[{"note":"Default export, not named. For CommonJS: const flushChunks = require('webpack-flush-chunks').default or const flushChunks = require('webpack-flush-chunks') depending on your bundler.","wrong":"import { flushChunks } from 'webpack-flush-chunks'","symbol":"flushChunks","correct":"import flushChunks from 'webpack-flush-chunks'"},{"note":"In CommonJS environments that support ES modules interop, require returns the exports object directly; the default is on module.exports, not .default.","wrong":"const flushChunks = require('webpack-flush-chunks').default","symbol":"flushChunks","correct":"const flushChunks = require('webpack-flush-chunks')"},{"note":"For strict CommonJS interop, use destructuring with default.","wrong":"const { flushChunks } = require('webpack-flush-chunks')","symbol":"flushChunks","correct":"const { default: flushChunks } = require('webpack-flush-chunks')"}],"quickstart":{"code":"import flushChunks from 'webpack-flush-chunks';\nimport { flushChunkNames } from 'react-universal-component/server';\nimport React from 'react';\nimport ReactDOMServer from 'react-dom/server';\nimport App from './App';\n\n// Assume webpackStats is from stats.json or webpack output\nconst webpackStats = {\n assetsByChunkName: {\n main: 'main.js',\n vendor: 'vendor.js',\n },\n chunks: [\n { id: 'main', files: ['main.js'] },\n { id: 'vendor', files: ['vendor.js'] },\n ],\n publicPath: '/',\n};\n\nconst app = ReactDOMServer.renderToString();\nconst { js, styles } = flushChunks(webpackStats, {\n chunkNames: flushChunkNames(), // from react-universal-component\n});\n\nconst html = `\n\n\n${styles}\n${app}
${js}\n`;\n\nconsole.log(html);","lang":"javascript","description":"Shows server-side rendering with flushChunks to inject JS and CSS tags for rendered chunks."},"warnings":[{"fix":"Ensure your webpackStats include chunk IDs. Use chunkNames option instead of moduleIds if migrating from v1.","message":"Version 2.0.0 changed internal resolution system. Chunks now identified by ID instead of name.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Switch to using chunkNames from react-universal-component's flushChunkNames or equivalent.","message":"The moduleIds option is deprecated in favor of chunkNames.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Use webpack's --json flag or compiler.getStats() in Node to generate stats with chunks info.","message":"flushChunks expects webpackStats object from server-side build (e.g., stats.json). Client-side stats will not include chunk information.","severity":"gotcha","affected_versions":"*"},{"fix":"Pass chunkIds in the options object: flushChunks(webpackStats, { chunkIds: [...] })","message":"If you are using Webpack 4 with aggressive code splitting, the chunkNames may not match file names directly. Use chunk IDs instead.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Upgrade to v2.0.2+ which includes unique filter for CSS and JS.","message":"The library does not automatically filter duplicates. If the same chunk is flushed multiple times, it will appear multiple times in output.","severity":"gotcha","affected_versions":"<2.0.2"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use: import flushChunks from 'webpack-flush-chunks' (ESM) or const flushChunks = require('webpack-flush-chunks') (CJS).","cause":"Incorrect import (destructuring named export instead of default import).","error":"TypeError: flushChunks is not a function"},{"fix":"Ensure you pass the proper webpack stats object (e.g., from stats.json). Verify it contains assetsByChunkName and chunks.","cause":"webpackStats is undefined or does not have expected shape.","error":"Cannot read property 'assetsByChunkName' of undefined"},{"fix":"Check the chunk names from your code splitting library (e.g., react-universal-component). Ensure they match the actual output chunk names.","cause":"The chunkNames provided do not match any key in webpackStats.assetsByChunkName.","error":"Chunk names not found in webpack stats"},{"fix":"Upgrade to v2.0.2 or later.","cause":"Using version <2.0.2 where duplicate filtering was not applied.","error":"Duplicate chunks in output"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}