Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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"
    }
}

Issue Analytics

State:
Created 3 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

2reactions

jeffposnickcommented, Oct 14, 2020

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.

1reaction

jeffposnickcommented, May 11, 2021

auto was something that webpack v5 set the publicPath to by default, but the production releases of workbox-webpack-plugin should override that default.

Top Results From Across the Web

Why does workbox-webpack-plugin prepend "auto" to all ...

When my app starts, all precached routes return http404, because the workbox InjectManifest plugin appears to prepend "auto" to all the ...

workbox-webpack-plugin - Chrome Developers

InjectManifest. This class supports compiling a service worker file provided via swSrc , and injecting into that service worker a list of URLs...

Why Does Workbox-Webpack-Plugin Prepend ... - ADocLib

Then run Let's add the Workbox webpack plugin and adjust the ... InjectManifest plugin adds "auto" to all my precache paths, resulting in...

Precaching pages with next-pwa - DEV Community ‍ ‍

How can you precache all your app pages to emulate a native app ... Its content is automatically precached by workbox-webpack-plugin.

workbox changelog

cleanupOutdatedCaches() will automatically be added to your generated service worker, which will in turn delete any out-of-date precaches no longer used by ...