Workbox 5 syntax error - Uncaught TypeError: workbox.expiration.CacheableResponsePlugin is not a constructor

Question

I'm trying to set up a simple Service Worker for a small static site, but I get a service worker console error:

sw.js:59 Uncaught TypeError: workbox.expiration.CacheableResponsePlugin is not a constructor

This is at the line new workbox.expiration.CacheableResponsePlugin

Any suggestions on how to fix this would be appreciated.

  workbox.routing.registerRoute(
    /\.(?:html)$/,
    new workbox.strategies.NetworkFirst({
      cacheName: 'html-cache',
      plugins: [
        new workbox.expiration.CacheableResponsePlugin({
          statuses: [0, 200],
        }),

        new workbox.expiration.ExpirationPlugin({
          maxEntries: 50,
          maxAgeSeconds: 5 * 60,
        })
      ]
    })
  )

Ovenware

it's not under expiration, see developers.google.com/web/tools/workbox/reference-docs/latest/… – Semitic

Thanks for responding If you can give any further details that would be appreciated. – Ovenware

i mean visit that link, you see it isn't workbox.expiration.CacheableResponsePlugin but workbox-cacheable-response.CacheableResponsePlugin. expiration is the wrong module. – Semitic

Answer 1

I was migrating from workbox v4 to v5 and having the same problem.

In your code,

new workbox.expiration.CacheableResponsePlugin

should be

new workbox.cacheableResponse.CacheableResponsePlugin

France

Answer 2

Example: 

workbox.routing.registerRoute(new RegExp('https://assets.abcd.com/.*\.*'),
new workbox.strategies.CacheFirst({
cacheName: 'assets',
plugins: [
  new workbox.cacheableResponse.Plugin({
     statuses: [0, 200, 206] // 206 Partial Code. 
  }),
  new workbox.rangeRequests.Plugin()
]}))

Overshoe

Try to replace new workbox.cacheableResponse.Plugin with new workbox.cacheableResponse.CacheableResponsePlugin and new workbox.rangeRequests.Plugin with new workbox.rangeRequests.RangeRequestsPlugin – Sox

Answer 3

its

new workbox.cacheableResponse.Plugin

now

Bestead

In the accepted answer, it's noted that this changed between v4 and v5. I'm guessing this changed again. As with the accepted answer, it would be useful to specify between which versions this changed. That way, when people are reviewing this thread in a year or two, it's easier to understand under what context your answer is appropriate. – Binominal

I dont have enogh reputation to comment :/ – Bestead

@Schlauewurst: No, but you can edit your answer to account for my suggestion above. That will make this answer more useful, and thus more likely to build your reputation. – Binominal

Its not mention in any Docs i just figure it out by trial error. – Bestead