Fixing a bug where async-split chunks caused undefined in

entrypoints.json

Author: weaverryan

lib/webpack/entry-files-manifest-plugin.js

@@ -12,6 +12,8 @@
 const logger = require('../logger');
 const fse = require('fs-extra');
 
+const bugMessage = 'This is possibly a bug, but will not impact your setup unless you use the entrypoints.json (e.g. splitEntryChunks()) file. To be super awesome, please report this as an issue.';
+
 function EntryFilesManifestPlugin(manifestFilename, entryNamesToSkip, styleEntriesMap) {
     this.manifestFilename = manifestFilename;
     this.entryNamesToSkip = entryNamesToSkip;
@@ -36,7 +38,7 @@ function extractChunkIds(entryPoint) {
             } else if (/\.css$/.test(filename)) {
                 files.cssChunkIds.push(chunk.id);
             } else {
-                logger.debug(`Unable to determine file type for entry ${filename}. This is possibly a bug, but will not impact your setup unless you use the entrypoints.json file. To be super awesome, please report this as an issue.`);
+                logger.warning(`Unable to determine file type for entry ${filename}. ${bugMessage}`);
             }
         }
     }
@@ -45,13 +47,46 @@ function extractChunkIds(entryPoint) {
 }
 
 function getChunkNameFromId(allChunks, chunkId) {
-    return allChunks.find(chunk => {
+    const matchedChunk = allChunks.find(chunk => {
         return chunk.id === chunkId;
-    }).name;
+    });
+
+    if (!matchedChunk) {
+        logger.warning(`Could not locate chunk with id ${chunkId}. ${bugMessage}`);
+
+        return false;
+    }
+
+    if (typeof matchedChunk.name !== 'undefined') {
+        return matchedChunk.name;
+    }
+
+    // this can happen if the chunk was already split due to async code splitting
+    if (matchedChunk.files.length !== 1) {
+        logger.warning(`Found ${matchedChunk.files.length} files in chunk id ${matchedChunk.id} but expected exactly 1. ${bugMessage}`);
+
+        return false;
+    }
+
+    // the only file has the correct filename (without versioning problems)
+    return matchedChunk.files[0];
+}
+
+function convertChunkIdsToChunkNames(allChunks, chunkIds) {
+    return chunkIds.map(
+        chunkId => getChunkNameFromId(allChunks, chunkId)
+    ).filter(chunkName => chunkName !== false);
 }
 
 function convertChunkNamesToFilenames(chunkNames, extension) {
-    return chunkNames.map(chunkName => `${chunkName}.${extension}`);
+    return chunkNames.map(chunkName => {
+        // possible for the async-split chunks
+        if (chunkName.endsWith(`.${extension}`)) {
+            return chunkName;
+        }
+
+        return `${chunkName}.${extension}`;
+    });
 }
 
 EntryFilesManifestPlugin.prototype.apply = function(compiler) {
@@ -71,8 +106,8 @@ EntryFilesManifestPlugin.prototype.apply = function(compiler) {
             }
 
             // look up the original chunk name by id
-            const cssChunkNames = cssChunkIds.map(chunkId => getChunkNameFromId(stats.compilation.chunks, chunkId));
-            const jsChunkNames = jsChunkIds.map(chunkId => getChunkNameFromId(stats.compilation.chunks, chunkId));
+            const cssChunkNames = convertChunkIdsToChunkNames(stats.compilation.chunks, cssChunkIds);
+            const jsChunkNames = convertChunkIdsToChunkNames(stats.compilation.chunks, jsChunkIds);
 
             const cssFiles = convertChunkNamesToFilenames(cssChunkNames, 'css');
             const jsFiles = convertChunkNamesToFilenames(jsChunkNames, 'js');

test/functional.js

@@ -1393,6 +1393,40 @@ module.exports = {
                     done();
                 });
             });
+
+            it('Use splitEntryChunks() with code splitting', (done) => {
+                const config = createWebpackConfig('web/build', 'dev');
+                config.addEntry('main', ['./js/code_splitting', 'vue']);
+                config.addEntry('other', ['./js/no_require', 'vue']);
+                config.setPublicPath('/build');
+                // enable versioning to make sure entrypoints.json is not affected
+                config.enableVersioning();
+                config.splitEntryChunks();
+                config.configureSplitChunks((splitChunks) => {
+                    splitChunks.minSize = 0;
+                });
+
+                testSetup.runWebpack(config, (webpackAssert) => {
+                    webpackAssert.assertOutputJsonFileMatches('entrypoints.json', {
+                        main: {
+                            js: ['runtime.js', 'vendors~main~other.js', 'main.js'],
+                            css: []
+                        },
+                        other: {
+                            // the 0.[hash].js is because the "no_require" module was already split to this
+                            // so, it has that filename, instead of following the normal pattern
+                            js: ['runtime.js', 'vendors~main~other.js', '0.f1e0a935.js', 'other.js'],
+                            css: []
+                        },
+                    });
+
+                    // make split chunks are correct in manifest
+                    webpackAssert.assertManifestKeyExists('build/vendors~main~other.js');
+                    webpackAssert.assertManifestKeyExists('build/0.f1e0a935.js');
+
+                    done();
+                });
+            });
         });
     });
 });