Generate PWA Assets functionality not works when srcDir is not default

[aa900031]

Hi team,

I've discovered an issue where the Generate PWA Assets functionality not works when the srcDir is not set to its default value (e.g: set to src).

I found the root cause in file: https://github.com/vite-pwa/vite-plugin-pwa/blob/6845dc7ab8c8927918a7431f4f8cb296dd399ca2/src/pwa-assets/config.ts#L64, the root is viteConfig.root and that is equal to nuxt.srcDir in nuxt default configuration. Therefore, if images are set to 'src/public/favicon.svg' in pwa-assets.config.ts, it resolves to 'src/src/public/favicon.svg'. This results in a file not found error, as the actual path should be 'src/public/favicon.svg'.

[userquin]

Nuxt 3.12.0 (nightly) also failing when building and generating dts pwa icons (weird, in dev works)

/cc @danielroe maybe some paths in dev different from build/prepare commands

[userquin]

@aa900031 can you provide minimal reproduction?

[aa900031]

@userquin @danielroe minimal reproduction is here, but stackblitz can't exec sharp, so I think should download this project and run at local

https://stackblitz.com/edit/reproduce-vite-pwa-nuxt-assets-custom-src-gwjm7u?file=README.md

[userquin]

Daniel, in Nuxt 3.12 now we have 2 Vite roots, server (root folder) and client (now it is app folder) and so we need to change the logic: since we've the image relative to root folder we cannot use the same logic fro server and client.

Moving pwa-assets.config file inside app works in dev but not generating pwa icons on build: pwa icons types in dts also missing.

EDIT: adding pwa-assets-config with relative image works, but we need 2 pwa assets config files.

[userquin]

@aa900031 we need to review the logic in vite pwa plugin, we'll need to add some hooks to resolve pwa assets configuration and pwa image, by default should work as it is right now (add resolve config and resolve pwa image).

In the meantime use default nuxt layout or switch to PWA Assets Generator CLI, sorry.

[aa900031]

@userquin Thanks for your reply, I'll use CLI to handle it for now

[userquin]

@aa900031 I guess I've found the problem, testing with your reproduction, maybe we don't need to change pwa plugin.

[userquin]

With the new version I'm going to release (0.8.0), you will need to move pwa-assets.config.ts inside src folder and:

1. configure public dir properly

// nuxt.config.ts
import { resolve } from 'node:path'
...
export default defineNuxtConfig({
  nitro: {
    publicAssets: [{ dir: resolve(process.cwd(), 'src/public') }]
  },
  dir: {
    public: 'src/public',
  },

2. or move public folder to root (like new v4 layout, using app instead src), you also need to change image name in pwa-assets.config.ts:

// src/pwa-assets.config.ts
export default defineConfig({
  ...
  images: '../public/favicon.svg',
})

[aa900031]

I think change dir.public is not a good idea, that will be have compatibility for other modules.

let me find some modules later

[aa900031]

If use nuxt/image modules and set dir.public like your guide that will not working

because nuxt/image resolve public dir with srcDir: https://github.com/nuxt/image/blob/3a98a685746b5be2188ddf59d091a4f3e525067b/src/module.ts#L60

[danielroe]

Nuxt resolves the public directory like this: resolve(nuxt.options.srcDir, nuxt.options.dir.public). dir.public is public in v4 but will be a fully resolved directory in v4, defaulting to resolve(nuxt.options.rootDir, 'public').

[userquin]

Nuxt resolves the public directory like this: resolve(nuxt.options.srcDir, nuxt.options.dir.public). dir.public is public in v4 but will be a fully resolved directory in v4, defaulting to resolve(nuxt.options.rootDir, 'public').

So... nuxt image not yet compatible with v4 layout

[danielroe]

resolve(nuxt.options.srcDir, options.dir) should correctly resolve to resolve(nuxt.options.rootDir, 'public') in this case.

[aa900031]

If nuxt/image resolves the public path to src/public in the context of setting srcDir: 'src'

Continuing with the previous context, I added the setting dir.public: 'src/public' suggested by @userquin, then the public path I will get in nuxt/image will be src/src/public, right? Such a result should be unexpected

The above versions are all in Nuxt 3

[userquin]

Continuing with the previous context, I added the setting dir.public: 'src/public' suggested by @userquin, then the public path I will get in nuxt/image will be src/src/public, right? Such a result should be unexpected

I need to review the code, it will take more time since I need to rewrite the pwa plugin logic, in the meantime use the CLI, sorry again.

The above versions are all in Nuxt 3

Yes, but we're talking about a breaking change in Nuxt 3.12, you can try using nuxt 3.12 (npm:nuxt-nightly@latest) moving public folder to root, both nuxt image and pwa will work (use my previous 2).