Search code examples
javascriptreactjscompilationrollupvite

How can I disable conversion of .json/.webmanifest url into base64 string?


I have a problem that has been bothering me for a while now. I have a vite-react-typescript project in VSCode, with a link in the index.html page to a webmanifest. This is basically a json file with a different extention.

When I build my app, the index.html output file contains the meta tag, however instead of referencing the path of the .webmanifest file, it has converted the entire file into base64. Because of this some browsers cannot find the .manifest file and therefore the website cannot be installed as a PWA.

I assume the problem/possible solution lies in the compiler/build options of vite, however I don't know how to fix this auto-conversion.

Here is the github repo: https://github.com/PluginDev-A/Website the compiled index.html file is in the dist directory, the original index.html file is in the main directory. The problem is on line 6 of both files

**It does not matter whether the file-extention is .json or .webmanifest, both urls get converted upon build


Solution

  • That file should be probably placed in public directory because it is:

    • Never referenced in source code (e.g. robots.txt)
    • Must retain the exact same file name (without hashing)

    And it should be referenced from index.html with absolute path

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