Icons folder generated twice at build time

[BenjaminOddou]

Hello @kevinmarrec !

I have a question regarding the generation of PWA icons during build. Do you know why icons are generated twice in the .output folder ?

I have a first folder icons under : .output/public/_nuxt/icons and a second one under : .output/public/assets/icons

Is it actually something intended ? Is it possible to remove the second one as it is not used by the generated manifest.json file ?

Thank you in advance for your response ! 🙏

[kevinmarrec]

Hi @BenjaminOddou , I'll have a look :)

[BenjaminOddou]

@kevinmarrec , thank you !

Just for the info my config file looks like this :

// nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: [
    '@kevinmarrec/nuxt-pwa'
  ],
  pwa: {
    workbox: {
      enabled: true
    },
    icon: {
      source: './assets/pwa-512x512.png'
    },
    manifest: {
      // some parameters
    }
  },
})

I am sourcing my icon from the assets folder instead of the public one in order to prevent it from being imported during build.

[kevinmarrec]

@BenjaminOddou I've been investigating and I think you got twice the assets cause you built your project (.output) twice with two different Nuxt configurations. Most likely you changed app.buildAssetsDir, which is by default _nuxt.

Remove .output and build again, you shouldn't have both _nuxt & assets.

You also need to not forget everything in public folder will be copied in .output/public, so if you have a public/assets at root of your project, you may have both _nuxt & assets folders in final public folder, but you shouldn't have twice the generated icons.

[BenjaminOddou]

@kevinmarrec I tested to remove the .output folder but nothing changed ... I don't think I changed app.buildAssetsDir. Here is my full config :

// nuxt.config.ts
import path from 'path'
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',
    '@kevinmarrec/nuxt-pwa',
    '@nuxt/image-edge',
    '@nuxtjs/color-mode',
    '@pinia/nuxt'
  ],
  buildModules: [
    [
      '@nuxt-modules/compression',
      {
        algorithm: 'brotliCompress',
        success: () => {
          console.log('✅ Success brotli compression')
        }
      }
    ]
  ],
  image: {
    staticFilename: '[publicPath]/images/[name]-[hash][ext]',
    dir: 'assets/images'
  },
  colorMode: {
    classSuffix: '',
    dataValue: 'theme'
  },
  css: ['@/assets/css/tailwind.css'],
  pwa: {
    workbox: {
      enabled: true
    },
    icon: {
      source: './assets/pwa-512x512.png'
    },
    manifest: {
      // some parameters
    }
  },
  vite: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './'),
        '@components': path.resolve(__dirname, './components'),
        '@stores': path.resolve(__dirname, './stores'),
        '@js': path.resolve(__dirname, './assets/js'),
        '@images': path.resolve(__dirname, './assets/images')
      }
    }
  }
})

In my package.json file :

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "upck": "npx npm-check-updates -u",
    "eslint-fix": "eslint . --fix"
  },
  "devDependencies": {
    "@botpoison/browser": "^0.1.30",
    "@kevinmarrec/nuxt-pwa": "^0.3.1",
    "@nuxt-modules/compression": "^0.1.0",
    "@nuxt/image-edge": "^1.0.0-27628766.3629b9a",
    "@nuxtjs/color-mode": "^3.1.4",
    "@nuxtjs/eslint-config-typescript": "^10.0.0",
    "@nuxtjs/tailwindcss": "^5.3.0",
    "@pinia/nuxt": "^0.3.0",
    "@typescript-eslint/eslint-plugin": "^5.30.7",
    "@typescript-eslint/parser": "^5.30.7",
    "axios": "^0.27.2",
    "eslint": "^8.20.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-nuxt": "^3.2.0",
    "eslint-plugin-prettier": "^4.2.1",
    "nuxt": "^3.0.0-rc.6",
    "pinia": "^2.0.16",
    "prettier": "^2.7.1",
    "prettier-plugin-tailwindcss": "^0.1.12",
    "vite-plugin-compression": "^0.5.1"
  },
  "dependencies": {
    "gsap": "npm:@gsap/shockingly@^3.10.4"
  }
}

Here is my file hierarchy (my assets folder is not embedded in my public folder).

Here what I have in the .output folder.

[kevinmarrec]

@BenjaminOddou That's really weird.

In this repository there's an example you can build with example:build command of your package manager, and there's not issue in .output folder.

I also tried with custom source with a local assets folder, no issue.

It would mean it's around your project configuration but I'm not sure how can I help.

I would need you to either create a smaller reproduction or give me read access to your repository if it's possible.

[BenjaminOddou]

@kevinmarrec here is a small repo I made based on my project, I think the bug is caused by my package.json config.

link to the repo

Thank you in advance ! 🙏

[kevinmarrec]

@BenjaminOddou Thanks, investigating right now 👀

[kevinmarrec]

@BenjaminOddou Alright, thanks to your repo I can reproduce it when not using custom buildAssetsDir. There's no duplication when using a custom one like /assets/. I'm gonna try to track what can cause the issue in the module itself now.

EDIT : It sounds like to be specifically /assets/ that do not trigger issue, anything else including default (/_nuxt/) have both assets & ${buildAssetsDir} in .output