experimental fixWebpackChunksIssue

index.js

@@ -26,6 +26,8 @@ const defaultOptions = {
   crawl: true,
   waitFor: false,
   externalServer: false,
+  // workaround for https://github.com/geelen/react-snapshot/issues/66#issuecomment-331718560
+  fixWebpackChunksIssue: false, // experimental
   minifyOptions: {
     minifyCSS: true,
     collapseBooleanAttributes: true,
@@ -148,6 +150,7 @@ const inlineCss = async ({ page, url }) => {
         document.head.appendChild(link);
       });
 
+      // TODO: separate config for this
       Array.from(document.querySelectorAll("script[src]")).forEach(x => {
         x.parentNode.removeChild(x);
         x.setAttribute("async", "true");
@@ -164,6 +167,22 @@ const inlineCss = async ({ page, url }) => {
   );
 };
 
+const fixWebpackChunksIssue = ({ page, basePath }) => {
+  return page.evaluate(basePath => {
+    const localScripts = Array.from(
+      document.querySelectorAll("script[src]")
+    ).filter(x => x.src.startsWith(basePath));
+    const mainRegexp = /main\.[\w]{8}.js/;
+    const mainScript = localScripts.filter(x => mainRegexp.test(x.src))[0];
+    const chunkRegexp = /([\d]+)\.[\w]{8}\.chunk\.js/;
+    const chunkSripts = localScripts.filter(x => chunkRegexp.test(x.src));
+    chunkSripts.forEach(x => {
+      x.parentElement.removeChild(x);
+      mainScript.parentNode.insertBefore(x, mainScript.nextSibling);
+    });
+  }, basePath);
+};
+
 const saveAsHtml = async ({ page, filePath, options }) => {
   const content = await page.evaluate(() => document.documentElement.outerHTML);
   const minifiedContent = options.minifyOptions
@@ -220,6 +239,8 @@ const run = async userOptions => {
     aferFeth: async ({ page, route }) => {
       if (options.removeStyleTags) await removeStyleTags({ page });
       if (options.inlineCss) await inlineCss({ page, url });
+      if (options.fixWebpackChunksIssue)
+        await fixWebpackChunksIssue({ page, basePath });
       const filePath = path.join(destinationDir, route);
       if (options.saveAs === "html") {
         await saveAsHtml({ page, filePath, options });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-snap",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Pre-renders web app into static HTML",
   "main": "index.js",
   "author": "stereobooster",

src/puppeteer_utils.js

@@ -64,8 +64,12 @@ const getLinks = async ({ page }) => {
 const crawl = async ({
   options,
   basePath,
-  beforeFetch = ({ page, route }) => { ({ page, route }) },
-  aferFeth = ({ page, route }) => { ({ page, route }) },
+  beforeFetch = ({ page, route }) => {
+    ({ page, route });
+  },
+  aferFeth = ({ page, route }) => {
+    ({ page, route });
+  },
   onEnd = () => {}
 }) => {
   let shuttingDown = false;
@@ -90,7 +94,7 @@ const crawl = async ({
    * @param {string} url
    * @returns {void}
    */
-  const addToQueue = (url) => {
+  const addToQueue = url => {
     if (Url.parse(url).hostname === "localhost" && !uniqueUrls[url]) {
       uniqueUrls[url] = true;
       enqued++;

tsconfig.json

@@ -8,7 +8,5 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true
   },
-  "include": [
-    "./src/"
-  ]
-}
+  "include": ["./src/"]
+}