Spago bundle-app: no loader for image files

Trying to include an image in a halogen app based on purescript-halogen-template, spago (or esbuild through spago?) complains about not having a loader configured.

> npx spago bundle-app --to prod/index.js
[info] Build succeeded.
✘ [ERROR] No loader is configured for ".svg" files: assets/thing.svg

    output/MyApp.Component.HTML.Images/foreign.js:3:30:
      3 │ export const thingURL = require('../../assets/thing.svg');
        ╵                               ~~~~~~~~~~~~~~~~~~~~~~

1 error
[error] Bundle failed.

PNG, JPG or SVG makes no difference. I am sure I’m missing some configuration somewhere, or perhaps this is not the way to reference image files, but it does work for spago build. Would greatly appreciate any advise.

1 Like

Hi,

I think the issue here is, that esbuild does not include an svg-loader by default (spago uses esbuild).

There is an plugin available but sadly you have to configure it via a javascript build script (see here) and there is some discussion about being able to do this via CLI but I’d not get my hopes hight.

1 Like

It’s not just SVG though, but PNG and JPG as well. Surely esbuild has loaders for them by default?

And shouldn’t it be possible to just associate the svg extension with a regular file loader? But I can’t find how to configure esbuild through spago at all… This web and node stuff is not exactly my strong suit…

I’m not sure but I think you cannot - personally I call esbuild outside of spago.

1 Like

As far as I can remember, Esbuild has this included by default, you just have to configure it like this

As @CarstenKoenig pointed out, it’s probably a good idea to call spago build and esbuild ... as separate commands.

1 Like

Yup, that did the trick!