No loader able to handle the import of a .webmanifest file

What version of Remix are you using?

1.2.3

Steps to Reproduce

Create a manifest.webmanifest file and import it.

Example contents:

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Then import it:

import manifest from "~/assets/manifest.webmanifest";

Expected Behavior

It will import the file with the url, like mentioned in the docs: https://remix.run/docs/en/v1/api/conventions#asset-url-imports

Actual Behavior

Causes the following error:

✘ [ERROR] No loader is configured for ".webmanifest" files: app/assets/manifest.webmanifest

    app/root.tsx:4:21:
      4 │ import manifest from "~/assets/manifest.webmanifest";
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Build failed with 1 error:
app/root.tsx:4:21: ERROR: No loader is configured for ".webmanifest" files: app/assets/manifest.webmanifest

[sergiodxa]

Since the .webmanifest file is a static file, any URL inside it would also be static, so I think importing it should give your a URL instead of the content, if you want to preload the icons you can know the URLs because they are static anyway.

[bewildergeist]

@MichaelDeBoey @mcansh: As it says in the MDN docs:

Browsers generally support manifests with other appropriate extensions like .json (Content-Type: application/json)

So it feels reasonable to say:

1. If you want to just import an asset URL, use an app.webmanifest file
2. If you also want to import and parse the file to e.g. extract icons, then use a manifest.json file

…which the #3081 PR (with Logan’s recent update) would support.

(With the caveat that I haven’t empirically tested whether “browsers generally support” actually means that all current browsers support JSON manifests, but I assume so).

And the 3rd option would be to create e.g. a app[.]webmanifest.js route file that returns a json() response, which allows for custom Cache-Control headers and the ability to share e.g. icon references across the app. Like @jacob-ebey does here.