Links to icons in webmanifest are not resolved during building

[budarin]

Describe the bug

Have a link to webmanifest in html file

<link rel="manifest" href="src/assets/manifest.webmanifest" />

Original peace of code from webmanifest

    "icons": [
        {
            "src": "/src/assets/site_icons/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
    ...

After building have a webmanifest in dist with original paths & names as in development
The icons themselves are also missing in dist

    "icons": [
        {
            "src": "/src/assets/site_icons/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
    ...

all other icons in index.html processed: inserted correct paths and hashed icon names

I don't understand how #13252 was closed if it didn't solve this problem

PS: Moving webmanifest to public does not solve the problem at all, even in the link to the project in #13252, this problem is not solved - links to icons do not change in any way and do not display the actual hashed icon names and their location

Reproduction

demo project

Steps to reproduce

• run "build" cmd
• inspect manifest.webmanifest in dist

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (6) x64 AMD FX(tm)-6300 Six-Core Processor
    Memory: 12.48 GB / 23.90 GB
  Binaries:
    Node: 22.0.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.5.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.5.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: 126.0.6478.185
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @vitejs/plugin-react: ^4.3.1 => 4.3.1
    vite: ^5.3.4 => 5.3.5

Used Package Manager

pnpm

Logs

 vite build --debug

  vite:config bundled config file loaded in 78.13ms +0ms
  vite:config using resolved config: {
  vite:config   define: { VERSION: '"0.0.0"' },
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:react-babel',
  vite:config     'vite:react-refresh',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:force-systemjs-wrap-complete',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   resolve: {
  vite:config     mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ],
  vite:config     conditions: [],
  vite:config     extensions: [
  vite:config       '.mjs',  '.js',
  vite:config       '.mts',  '.ts',
  vite:config       '.jsx',  '.tsx',
  vite:config       '.json'
  vite:config     ],
  vite:config     dedupe: [ 'react', 'react-dom' ],
  vite:config     preserveSymlinks: false,
  vite:config     alias: [ [Object], [Object], [Object], [Object], [Object] ]
  vite:config   },
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     host: true,
  vite:config     port: 3000,
  vite:config     sourcemapIgnoreList: [Function: isInNodeModules$1],
  vite:config     middlewareMode: false,
  vite:config     fs: {
  vite:config       strict: true,
  vite:config       allow: [Array],
  vite:config       deny: [Array],
  vite:config       cachedChecks: undefined
  vite:config     }
  vite:config   },
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { onwarn: [Function: onwarn] },
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     copyPublicDir: true,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     ssrEmitAssets: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     modulePreload: { polyfill: true },
  vite:config     cssMinify: true
  vite:config   },
  vite:config   esbuild: { jsxDev: false, jsx: 'automatic', jsxImportSource: undefined },
  vite:config   optimizeDeps: {
  vite:config     holdUntilCrawlEnd: true,
  vite:config     esbuildOptions: { preserveSymlinks: false, jsx: 'automatic' },
  vite:config     include: [ 'react', 'react/jsx-dev-runtime', 'react/jsx-runtime' ]
  vite:config   },
  vite:config   configFile: '/Users/vadim_budarin/projects/vite-sw-globals/vite.config.mts',
  vite:config   configFileDependencies: [
  vite:config     '/Users/vadim_budarin/projects/vite-sw-globals/package.json',
  vite:config     '/Users/vadim_budarin/projects/vite-sw-globals/vite.config.mts'
  vite:config   ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/Users/vadim_budarin/projects/vite-sw-globals',
  vite:config   base: '/',
  vite:config   rawBase: '/',
  vite:config   publicDir: '/Users/vadim_budarin/projects/vite-sw-globals/public',
  vite:config   cacheDir: '/Users/vadim_budarin/projects/vite-sw-globals/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   ssr: {
  vite:config     target: 'node',
  vite:config     optimizeDeps: { noDiscovery: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   bundleChain: [],
  vite:config   isProduction: true,
  vite:config   css: { lightningcss: undefined },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: true,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   envDir: '/Users/vadim_budarin/projects/vite-sw-globals',
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(1) {
  vite:config     'fnpd_/Users/vadim_budarin/projects/vite-sw-globals' => {
  vite:config       dir: '/Users/vadim_budarin/projects/vite-sw-globals',
  vite:config       data: [Object],
  vite:config       hasSideEffects: [Function: result],
  vite:config       webResolvedImports: {},
  vite:config       nodeResolvedImports: {},
  vite:config       setResolvedCache: [Function: setResolvedCache],
  vite:config       getResolvedCache: [Function: getResolvedCache]
  vite:config     },
  vite:config     set: [Function (anonymous)]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: { format: 'iife', plugins: '() => plugins', rollupOptions: {} },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +59ms
vite v5.3.3 building for production...
transforming (1) index.html  vite:resolve 0.36ms /src/sw/index.mts -> /Users/vadim_budarin/projects/vite-sw-globals/src/sw/index.mts +0ms
  vite:resolve 0.67ms sw/index.mts -> /Users/vadim_budarin/projects/vite-sw-globals/src/sw/index.mts +0ms
✓ 34 modules transformed.
dist/index.html                              0.59 kB │ gzip:  0.34 kB
dist/assets/vite-DcBtz0py.svg                1.50 kB │ gzip:  0.78 kB
dist/assets/manifest-VB3EhoCd.webmanifest    3.56 kB
dist/assets/react-CHdo91hT.svg               4.13 kB │ gzip:  2.05 kB
dist/assets/index-DiwrgTda.css               1.39 kB │ gzip:  0.72 kB
dist/assets/index-Csag_5IG.js              143.51 kB │ gzip: 46.19 kB
✓ built in 1.07s

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[cloudflypeng]

In my opinion, the manifest file was not parsed correctly by Vite, so perhaps a plugin needs to be used to process the manifest file

[budarin]

@cloudflypeng what a plugin?

[cloudflypeng]

@budarin If you only want the manifest file to contain some resources that do not need vite build, you can put the icon file under public, which will be directly copied to the dist file. If you want the referenced resources to be rolled up and packaged, you may need to use plugins to perform dependency analysis on the JSON file

This may be helpful
manifest

[budarin]

using unhashed resources is not very good

It is not very clear how to use plugins if the manifest is processed by vite - there will be a conflict at this point

[budarin]

@cloudflypeng
Wrote a plugin https://www.npmjs.com/package/@budarin/vite-plugin-webmanifest

SOLVED

[cloudflypeng]

@cloudflypeng

Wrote a plugin https://www.npmjs.com/package/@budarin/vite-plugin-webmanifest

You are very fast and skilled.