When using the Workbox Webpack Plugin in development mode (locally), I get the following service worker error:
PrecacheController.mjs:62 Uncaught add-to-cache-list-conflicting-entries: Two of the entries passed to 'workbox-precaching.PrecacheController.addToCacheList()' had the URL undefined but different revision details. Workbox is is unable to cache and version the asset correctly. Please remove one of the entries.
I believe this is happening because, when webpack re-builds, it seems to add static assets twice to the precache call. Once in the service-worker.js
file, and another in the precache-manifest.XXX.js
file. Looking at both files I can see the chunk and entry scripts are added in both places, including the service-worker.js
.
This isn't a problem in production as every build gets wiped and rebuilt from scratch.
Here's my Workbox Webpack Plugin config:
new GenerateSW({
swDest: '../service-worker.js',
globDirectory: 'priv/static',
globPatterns: ['**/*.{js,css,png,jpg,gif,woff2}'],
runtimeCaching: [
{
urlPattern: /^https:\/\/js.intercomcdn.com\/[a-zA-Z0-9-/_.]*(js|woff)/,
handler: 'NetworkFirst'
}, {
urlPattern: /^https:\/\/fonts\.googleapis\.com/,
handler: 'NetworkFirst',
options: {
cacheName: 'google-fonts-stylesheets'
}
},
{
urlPattern: /^https:\/\/fonts\.gstatic\.com/,
handler: 'CacheFirst',
options: {
cacheName: 'google-fonts-webfonts',
cacheableResponse: {
statuses: [0, 200]
},
expiration: {
maxEntries: 5,
maxAgeSeconds: 60 * 60 * 24 * 365, // one year
}
}
},
{
urlPattern: /^https:\/\/logo.clearbit.com/,
handler: 'CacheFirst',
options: {
cacheName: 'clearbit-logos',
cacheableResponse: {
statuses: [0, 200]
},
expiration: {
maxAgeSeconds: 60 * 60 * 24 * 30, // approx one month
}
}
}, {
urlPattern: /^https:\/\/www.gravatar.com\/avatar\//,
handler: 'NetworkFirst'
}
]
})