Why does `nuxt generate` with @nuxt/pwa module generates always default icon in Gitlab-CI?

Question

I have the following problem. I am using nuxt with the pwa module to generate a pre-rendered webpage. The @nuxt/pwa icon module should generate the different sized icons for the manifest.

This is also working when I run nuxt generate on my laptop.

In my gitlab-ci pipeline the generation also is working but it is always generating the default nuxt icon

This icon I can not in my workspace so I guess it is somehow referenced in the docker build from node_modules.

I am using the following gitlab-ci job

build:
  image: node:alpine
  stage: build
  script:
    - npm run generate
  artifacts:
    paths:
      - dist/*
    expire_in: 14 days
  only:
    - master

The package.json looks like this:

  "scripts": {
    "generate": "nuxt generate",
    ...
  },
  "dependencies": {
    "@nuxtjs/pwa": "^3.0.0-beta.20",
    "nuxt": "^2.14.0",
    ...
  },
  "devDependencies": {
   ...
  }

I also tried a lot of different settings in my nuxt.conf.js as I guessed that the icon is not referenced correctly.

This was my last try

  pwa: {
    icon: {
      source: resolve(__dirname, './client/static/icon.png'),
    },
  },

But as it is found locally I thik that it is right.

Has anyone an idea why the nuxt generate does not work in gitlab-ci?

Answer 1

The issue seems to be the old cache located at /node_modules/.cache/pwa/icon

Nuxt doesn't generate new icons if the filenames are not changed so that is why the default icons are used. Especially if your new icon file is 'icon.png'.

You could go about this three ways:

1. Delete the cache at /node_modules/.cache/pwa/icon before deploying but this only works with local/dev environment so this is out.

2. You could rename your file as the other comment suggested but you would have to rename it every time you change the file. So while this would work, it is still far from good, even for a hacky solution.

3. The third approach would be to delete that folder in your yarn/npm generate script. This would look something like this:

generate: 'rm -r /node_modules/.cache/pwa/icon && nuxt generate';

Answer 2

I had the same issue and the icons didn't get updated also on my local environment. For now I was able to fix it by adding

pwa: {
    icon: {
         fileName: 'app-icon.png',
    },
},

to my nuxt.config.js and change the filename accordingly. But thats probably a little hacky.

I use Netlify for deployment and cleared the cache there but with no luck. Did you cleared your Runner Cache in Gitlab and then tried again?

Answer 3

This worked for me,

Delete the following:

1. node_modules/.cache
2. .nuxt
3. dist(if generated)

Then do the following:

npm install
npm run generate