Sapper application can't import a WebP image (successkid.webp)

[silvioprog]

The Sapper template (rollup) can't import a WebP image, raising the following error:

my-app>npm run dev

> TODO@0.0.1 dev my-app
> sapper dev

✗ client
Unexpected character '' (Note that you need plugins to import files that are not JavaScript)
1: RIFF`\☺WEBPVP8X
2: ,�♥�☻ICCP�☻☻�lcms♦0mntrRGB XYZ �♂
desc☺ @cprt☺`6wtpt☺�¶chad☺�,rXYZ☺�¶bXYZ☺�¶gXYZ☻¶rTRC☻¶ gTRC☻¶ bTRC☻¶ chrm☻4$dmnd☻X$dmdd☻|$mluc☺♀enUS$∟GIMP built-in sRGBmluc☺♀enUS→∟Public DomainXYZ ��☺�-sf32☺♀B♣����%�����������♥��nXYZ o�8�♥�XYZ $�☼���XYZ b���↑�para♥☻Y‼�
                                                                                                                             ^
4: [chrm♥��T|L���&g☼\mluc☺♀enU∟GIMPmluc☺♀enU∟sRGBVP8 �2☺�♦�☺*�♥�☻>1¶�B��!▬>��H♥♦���]‼�����♥��_↑�↓�♫�z��W�vB,�o�� h)�Z�����<~}�W�/�⌂����♠�_�▼���?�⌂��d�ǹӼ���♂���{��d_�����X���ϑ��?������|�~�~� [��>���9��\��§�G����#�?�o�
⌂_�+�7��˿�▼�����~���~�����������_���ϻ↨�O�O���?��U|�⌂,�����lϢ�?��e������~f⌂s�q⌂���⌂<�_��S[ݟ�▲��G���'�?����/W��t��▼�y����<~�-���GܾtR����⌂��e��☼���⌂��0���?������♦���‼�7�?�<q���'�+�������?2������������/�⌂����=�9���⌂�O�?��▲
��↨Ƈ�w�g�$i��`▲�◄o��T��l        ♣��♣7��
5: �.N�u)Fa��h������vŏ��k$(Ϧ��-��%��-Z♦6=�;D�L◄��t�r��↨-�f�c�^+�-;↨��S۹uԼ�AJ�§0���W�ue�·♂n��������♣↓�,We�♫�^0�����(Z6d�+n�u��������J�䕫dz������5��W#_Q﵅��i��w�o�O�%E:<Y/�T���N}�ʀ|�↓�\����zpI` f�✗ server
Unexpected character '' (Note that you need plugins to import files that are not JavaScript)
1: RIFF`\☺WEBPVP8X
2: ,�♥�☻ICCP�☻☻�lcms♦0mntrRGB XYZ �♂
desc☺ @cprt☺`6wtpt☺�¶chad☺�,rXYZ☺�¶bXYZ☺�¶gXYZ☻¶rTRC☻¶ gTRC☻¶ bTRC☻¶ chrm☻4$dmnd☻X$dmdd☻|$mluc☺♀enUS$∟GIMP built-in sRGBmluc☺♀enUS→∟Public DomainXYZ ��☺�-sf32☺♀B♣����%�����������♥��nXYZ o�8�♥�XYZ $�☼���XYZ b���↑�para♥☻Y‼�
                                                                                                                             ^
4: [chrm♥��T|L���&g☼\mluc☺♀enU∟GIMPmluc☺♀enU∟sRGBVP8 �2☺�♦�☺*�♥�☻>1¶�B��!▬>��H♥♦���]‼�����♥��_↑�↓�♫�z��W�vB,�o�� h)�Z�����<~}�W�/�⌂����♠�_�▼���?�⌂��d�ǹӼ���♂���{��d_�����X���ϑ��?������|�~�~� [��>���9��\��§�G����#�?�o�
⌂_�+�7��˿�▼�����~���~�����������_���ϻ↨�O�O���?��U|�⌂,�����lϢ�?��e������~f⌂s�q⌂���⌂<�_��S[ݟ�▲��G���'�?����/W��t��▼�y����<~�-���GܾtR����⌂��e��☼���⌂��0���?������♦���‼�7�?�<q���'�+�������?2������������/�⌂����=�9���⌂�O�?��▲
��↨Ƈ�w�g�$i��`▲�◄o��T��l        ♣��♣7��
5: �.N�u)Fa��h������vŏ��k$(Ϧ��-��%��-Z♦6=�;D�L◄��t�r��↨-�f�c�^+�-;↨��S۹uԼ�AJ�§0���W�ue�·♂n��������♣↓�,We�♫�^0�����(Z6d�+n�u��������J�䕫dz������5��W#_Q﵅��i��w�o�O�%E:<Y/�T���N}�ʀ|�↓�\����zpI` f�> Server crashed
✔ service worker (92ms)

---

Step to reproduce:

'Hard' way:

Start a new Sapper application by cloning the official template showed here. After that, convert the JPEG image from src\node_modules\images\successkid.jpg to a WebP src\node_modules\images\successkid.webp (I have been using GIMP to do that). Now, change the index.svelte as following:

<script>
-	import successkid from 'images/successkid.jpg';
+	import successkid from 'images/successkid.webp';
</script>

and try to run the application.

Easy way:

Just download the attached project below, extract it and run the application using run install && npm run dev.

my-app.zip

[dimfeld]

Sounds like you just need https://github.com/rollup/plugins/tree/master/packages/image/#readme in your rollup config.

Edit: Actually see below 👇

[benmccann]

It's actually @rollup/plugin-url that you need in your Rollup config. webp support was just added by default a few days ago: rollup/plugins#625. That PR hasn't been released yet though, so you will need to configure it yourself for now

[silvioprog]

@dimfeld, problem solved using your suggestion. Thank you very much! :-)

[silvioprog]

@benmccann, oops, we summited the comment at the same time. :-) I'm going to take a look at the PR and apply the merging in my project. Thank you for answering! 👍