Workbox: Main webpack output bundle no longer pre-cached in V5

[stefanli]

Library Affected:
workbox-precaching, V5 Alpha 2

Browser & Platform:
webpack

Issue or Feature Request Description:
My main output file from webpack is no longer being included in the precache manifest after upgrading from V4 to V5. Here are the js assets that webpack outputs to my filesystem:

1.index_bundle.js
2.index_bundle.js
editor.worker.js
index_bundle.js
typescript.worker.js

Here's the cache manifest file that workbox v4 would output. Note that index_bundle.js is included.

self.__precacheManifest = (self.__precacheManifest || []).concat([
  {
    "revision": "c4bddb31ace86dbd7f567b40cb5a0bfd",
    "url": "index.html"
  },
  {
    "revision": "6180120d73972d5b0c2a",
    "url": "js/1.index_bundle.js"
  },
  {
    "revision": "96df8d6da3d4ae7f5051",
    "url": "js/2.index_bundle.js"
  },
  {
    "revision": "1fe07dc59a6c1a48c4fd173280d8ba88",
    "url": "js/editor.worker.js"
  },
  {
    "revision": "85e7395985be8377cdee",
    "url": "js/index_bundle.js"
  },
  {
    "revision": "b74c9f976a468d7407e2346e516585b8",
    "url": "js/typescript.worker.js"
  }
]);

Here's the precache manifest that V5 outputs (inline in sw.js):

self.__WB_MANIFEST = [
  { revision: "c4bddb31ace86dbd7f567b40cb5a0bfd", url: "index.html" },
  { revision: "d4059a63ae8430589d9ddb5a4b1be0eb", url: "js/1.index_bundle.js" },
  { revision: "208f42a5bd2761181e6078e893d5dad7", url: "js/2.index_bundle.js" },
  { revision: "1fe07dc59a6c1a48c4fd173280d8ba88", url: "js/editor.worker.js" }
];

index.bundle.js is missing here (and also typescript.worker.js I just noticed). The only change on my end is upgrading workbox. Not sure what to do to further debug why this is the case any advice is appreciated.

[stefanli]

Slight correction I did also update sw.js in accordance with the alpha docs:
precaching.precacheAndRoute(self.__precacheManifest);
-->
precaching.precacheAndRoute(self.__WB_MANIFEST);

This is my entire service worker file:

import * as precaching from 'workbox-precaching';
import * as core from "workbox-core";

core.skipWaiting();
core.clientsClaim();

precaching.precacheAndRoute(self.__WB_MANIFEST);

[jeffposnick]

Thanks for reporting this—could you also share your webpack configuration? The entire config would be best, if you could. Failing that, at least the config you're passing to InjectManifest() as well as your entry/output settings.

[stefanli]

Yeah no problems:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
const WorkboxPlugin = require("workbox-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  // Changed the entry point to a .tsx file
  entry: "./src/index.tsx",
  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".json"],
    alias: {
      // Needed for webpack to follow the path mappings in tsconfig.json
      shared_types: path.resolve(process.cwd(), "../server/src/shared_types/")
    }
  },
  output: {
    path: path.join(__dirname, "../server/build/public"),
    publicPath: "",
    filename: "js/index_bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [{ loader: "awesome-typescript-loader" }]
      },
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }]
      },
      {
        test: /\.(png|jp(e*)g|svg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8000, // Convert images < 8kb to base64 strings
              name: "images/[hash]-[name].[ext]"
            }
          }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "fonts/"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    new CopyWebpackPlugin([{ from: "assets", to: "assets/" }, "src/manifest.json"], { ignore: [".DS_Store"] }),
    new MonacoWebpackPlugin({
      output: "./js",
      // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
      languages: [
        "typescript"
      ]
    }),
    new WorkboxPlugin.InjectManifest({
      swSrc: "./src/sw.js",
      swDest: "sw.js"
    })
  ]
};

The above is merged with a webpack.prod.js:

const webpack = require("webpack");
const merge = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = (env) => {
  let CONNECT_LOCAL;
  if (env) {
    CONNECT_LOCAL = env.CONNECT_LOCAL;
  }
  return merge(common, {
    mode: "production",
    plugins: [
      new webpack.DefinePlugin({
        "process.env": {
          NODE_ENV: JSON.stringify("production"),
          SERVER_URL: JSON.stringify(CONNECT_LOCAL ? "http://localhost:8080" : "https://foobar.com")
        }
      })
    ]
  });
};

[jeffposnick]

I'm sorry, I'm not having any luck reproducing—I've managed to use most of your build configuration (except for a few things, like your local assets, and the Monaco editor stuff), but when I generate the precache manifest, it includes js/index_bundle.js.

Can you pass along the full output logged by your webpack build? I'd like to take a look at that and see if there's anything special from webpack's perspective about your js/index_bundle.js file.

And you're _definitely_ using InjectManifest with only the swSrc and swDest options set?

[stefanli]

Let me try to put together a minimal repo that repros the issue. Maybe I'll find that I'm doing something wrong in the process. :)

[stefanli]

After process of elimination I'm seeing some very strange behavior where when I comment out seemingly random code and rebuild index_bundle.js will now appear (which is probably why you can't repro) . Traveling for the next few days so might have to resume looking into this next week.

[stefanli]

OK I have attached a setup that reproduces the issue. I basically had to take my full project and start removing stuff until the issue resolved. I've eliminated as much code as I can but at this point seemingly any additional removal actually makes index.bundle.js pop up. Here are steps to reproduce:

1. In /client run npm install
2. In /server run npm install
3. In /client run npm run build

4. Open /server/build/public/sw.js and note that index.bundle.js is not included in the precache manifest.

5. Now open up /client/src/app/signInManager.tsx and comment out lines 4 and 7 (this is just one example try eliminating other code and eventually same thing will happen).

6. Rebuild and note that index.bundle.js now appears in /server/build/public/sw.js.

I kept thinking that there was a particular dependency that was causing the issue but seems like that is not the case.

workbox_issue.zip

[jeffposnick]

Thanks for the reproduction steps.

It might be hard to spot amongst all the other WARNING messages, but the following is logged and explains what's going on:

WARNING in index_bundle.js is 2.1 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.

WARNING in typescript.worker.js is 4.11 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.

As the message explains, you can configure maximumFileSizeToCacheInBytes to a value larger than the size of those assets if you want to precache them. (But be aware, of course, that precaching several megabytes unconditionally might not play nicely with devices using low-end connections. You know your user base better than I do, of course.)

[stefanli]

🤦‍♂️
Argh. Thanks and sorry for taking up your time with this. This is under development so haven't gotten to code splitting things properly yet. It's also an offline first desktop app so requirements are a bit more relaxed.