Workbox: InjectManifest plugin adds "auto" to all my precache paths, resulting in http404s when the app runs.

Created on 14 Oct 2020 · 3Comments · Source: GoogleChrome/workbox

Library Affected:
workbox-webpack-plugin

Browser & Platform:
Google Chrome v86.0.4240.75 on Windows 10.

Issue or Feature Request Description:
The workbox InjectManifest webpack plugin appears to be prepending "auto" to all my urls, which results in 404's when the page loads. I have to idea why it does this. I've tried re-installing npm packages, running in incognito, clearing all caches, etc.

I run the application with "webpack-dev-server --mode development --open", and I get the following warning, which might be part of the problem (watch is set to _false_ in webpack.config):

WARNING in InjectManifest has been called multiple times, perhaps due to running webpack in --watch mode. The precache manifest generated after the first call may be inaccurate! Please see https://github.com/GoogleChrome/workbox/issues/1790 for more information.

Note how all the paths have "auto" in front and return http404. Note that I cleared all caches on Chrome's "Application" tab. The same happens in an incognito tab:

When I open a new tab and manually delete the "auto" bit from the url, it works fine:

The service worker file with the injected manifest shows that "auto" is part of the urls:

Has anyone seen this before? I have no idea where that "auto" is coming from or how to get rid of it.

Source code (unfortunately just running locally):

I use the workbox-webpack-plugin to inject the precache manifest in my service worker, like so:
My service worker:

import {precacheAndRoute} from 'workbox-precaching';
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

// Use the imported Workbox libraries to implement caching,
// routing, and other logic:
precacheAndRoute(self.__WB_MANIFEST || []);

registerRoute(
    ({request}) => request.destination === 'image',
    new CacheFirst({cacheName: 'images'}),
);

My webpack.config.js. nothing fancy:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {InjectManifest} = require('workbox-webpack-plugin');

module.exports = {
    watch: false,
    entry: path.resolve(__dirname, './src/index.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash].js',
    },
    module: {
        rules: [{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, {
            test: /\.(png|svg|jpg|gif)$/,
            use: [
                'file-loader',
            ],
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Prototype webpack + react + workbox usage',
            template: './src/index.html',
            filename: './index.html',
            'meta': {
                'viewport': 'width=device-width, initial-scale=1.0',
                'charset': 'UTF-8'
            }
        }),
        new InjectManifest({
            swSrc: './service-worker.js',
            swDest: './workbox-sw-generated.js',
        })
    ]
};

My index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
              navigator.serviceWorker.register('/workbox-sw-generated.js')
            });
        }
    </script>
</head>

<body>
    <section id="index"></section>
</body>

</html>

And lastly, my package.json:

{
    "name": "simple_webpack_boilerplate",
    "version": "1.0.0",
    "description": "A ready to use simple webpack boilerplate for react",
    "main": "src/index.js",
    "scripts": {
        "start": "webpack-dev-server --mode development --open",
        "build": "webpack --mode production"
    },
    "author": "Willem",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "7.11.4",
        "@babel/preset-env": "7.11.0",
        "@babel/preset-react": "7.10.4",
        "babel-loader": "8.1.0",
        "file-loader": "^6.1.1",
        "html-webpack-plugin": "4.4.1",
        "terser-webpack-plugin": "^4.1.0",
        "webpack": "^5.0.0",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "3.11.0",
        "workbox-webpack-plugin": "^5.1.4"
    },
    "dependencies": {
        "lodash": "^4.17.20",
        "react": "16.13.1",
        "react-dom": "16.13.1",
        "react-router-dom": "^5.2.0"
    }
}

Source

willemodendaal

All 3 comments

@willemodendaal running webApp and serviceWorker with help of DevServer it very bad idea. Because he can`t handle hot updates of SW. Please check this.

If you wont test your service worker, build your app and run with some simple static http server (something like this) . It help you avoid disgusting things related to changes that not shown ^)

P.S. I think, in your case, error is normal behavior, because by default after first update your page serve old service worker with old links.

TheForsakenSpirit on 14 Oct 2020

👍1

workbox-webpack-plugin v5.x isn't compatible with webpack v5.x, which was just released. (You should have gotten some warning messages about unmet peer dependencies during npm install, and there also should have been some compilation warnings.)

Instead of '', webpack v5.x uses 'auto' as the default publicPath value for... reasons.

Please test out workbox-webpack-plugin v6.0.0-alpha.3 if you need webpack v5.x compatibility. Alternatively, downgrade to webpack v4.x for the time being.