Cache error during deployment

Support
1

Hi everybody!

I have an issue deploying my Nuxt.js webApp :frowning:

I have some major issues with cache.
On https://nougats-silvain.fr/, sometimes, users see old version, some times see new version, and sometimes see error 500.

I tried to deploy and clear cache, but nothing change.

I have an ERROR in my deploy log:

> [fatal] Nuxt build error
> 2:28:25 PM: ERROR in ./node_modules/.cache/nuxt/client.js
> 2:28:25 PM: Module build failed (from ./node_modules/babel-loader/lib/index.js):
> 2:28:25 PM: Error: [BABEL] node_modules/.cache/nuxt/client.js: Cannot find module "@babel/plugin-proposal-private-property-in-object"

But It looks for these files in the /.cache.
I’d like to delete all these cache files

Any ideas?

Thanks a lot!
Vincent

ERROR in ./node_modules/.cache/nuxt/client.js

2

Run a build without cache from the UI OR change your build command to rm -rf ./.cache && npm run build.

3

Hi!

Ok, i change my build command:

image
image1061×656 30.1 KB

And i have this error:

7:47:15 PM: $ rm -rf ./.cache && npm run build
7:47:16 PM: > silvain@1.0.0 build
7:47:16 PM: > nuxt build
7:47:27 PM: Failed during stage "building site": Build script returned non-zero exit code: 2
7:47:26 PM: [fatal] Nuxt build error
7:47:26 PM: ERROR in ./.nuxt/client.js
7:47:26 PM: Module build failed (from ./node_modules/babel-loader/lib/index.js):
7:47:26 PM: Error: [BABEL] .nuxt/client.js: Cannot find module "@babel/plugin-proposal-private-property-in-object"

I don’t understand why this @babel/plugin-proposal-private-property-in-object is a problem.
When generating my webapp localy, everything is OK, and my GIT is on day.

:frowning:

4

You can also try deleting ./.nuxt so it gets regenerated. Something like: rm -rf ./.cache ./.nuxt && npm run build.

5

:frowning: It doesn’t work either (but the command is good to know!).

I’ll see if I can delete this module

6

I fixed the @babel node_module problem.

But now, using the cmd:

$ rm -rf ./.cache ./.nuxt && npm run build

… this is an OLD version displaying.
When i hard refresh, i have a Page Not Found.

image
image794×560 31 KB

:cry:

8

Which page are you having this issue on? Your site appears to work fine.

10

Hi :slight_smile:

It seems that for new users, the website works. But for anyone who’s been there before (like my client and me), there’s this problem.

So potentially, many of her customers have the same problem, and I can’t tell them to clear their cache :sweat_smile:

When I go to the website (Old version, without the yellow banner)

image
image1920×1080 268 KB

2 or 3 seconds later

image
image1920×1080 98.1 KB

After an hard refresh (with the yellow banner : good version)

image
image1920×1080 273 KB

if i refresh again (but not an hard refresh)

image
image1920×1080 268 KB

Etc…

image

The animation (gif)

11

You’re using a service worker. So it’s likely that it’s caching the files and causing this issue. That’s not something we can control.

1 Like
12

Hi!

Thanks to you for your time, I’m going to dig into that.

13

It was actually a problem with PWA, where the workbox wasn’t working properly.

I added a service-worker.js :

self.addEventListener('install', event => {
  self.skipWaiting();
});

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          return caches.delete(cacheName);
        })
      );
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open('dynamic').then(cache => {
      return fetch(event.request).then(response => {
        cache.put(event.request, response.clone());
        return response;
      });
    })
  );
});

Allowing me to clear the client’s cache.

I added this script:

pwa: {
    workbox: {
      importScripts: ['/service-worker.js'] 
    },
   ...

Everything is now OK!

14

awesome glad to hear you got it sorted!