Package breaks HMR in SvelteKit with Tailwind

[aaronkai]

I was importing this package into my header component. It took a good long while to figure out why HMR stopped working in SvelteKit. Turns out, it was this package. To replicate, base install of sveltekit, and then svelteadd tailwind and mdsvex.

Cheers!

[RobBrazier]

Hi, I tried doing what you said, imported svelte-awesome and imported a couple of random icons in Counter.svelte

import Icon from 'svelte-awesome';
import { refresh } from 'svelte-awesome/icons';

then added

<Icon data={refresh}/>

then added searchPlus, changed the data to that - save - HMR worked fine

did the same in the todos route, still worked fine

What version are you using please? I can't replicate the issue.

[CollierCZ]

I get this error with version 2.4.6 of svelte-awesome. It only happens in development mode (when it tries to fetch all of the icons, not just the ones on the page). I get a long list of errors like the following:

Loading failed for the module with source “http://localhost:3000/node_modules/svelte-awesome/icons/buysellads.js?v=9916f903”.

[CollierCZ]

Seems like it breaks only in Firefox, at least for me.

[RobBrazier]

@aaronkai please can you check with v3.0.0? I have introduced another import option which should be less intensive

import refresh from 'svelte-awesome/icons/refresh';

I've also added a new page with an index of all available embedded v4 icons - https://docs.robbrazier.com/svelte-awesome/icons (no search yet, but Ctrl-F is your friend)

@CollierCZ I've seen this flagged a few times but only ever chalked that down to adblock, as it disappeared when I disabled adblock on localhost - happy to be proved wrong though.

[cwbriscoe]

I am using v3.0.0 and I am having the same issue with the brave browser with the built-in adblock turned off for localhost. It does work fine with Firefox so not a huge deal for me.

I am pretty sure it has something to do with this script:

Edit: I deleted all references to buysellads in svelte-awesome, did a hard reload and clear cache via dev tools and it then works in Brave Browser. Not an ideal solution but maybe is will help others.

[cwbriscoe]

I got tired of manually changing file names and editing files to get around this issue so I wrote a script. It works on Ubuntu 22.04 when ran from the folder where node_modules is located. Here is the script in case it helps anybody else out:

#! /bin/bash
# this script modifies some files in svelte-awesome that prevents
# hot reloading to work with svelte on some browsers

REPLACEMENT=barter

cd node_modules/svelte-awesome
sed -i -e 's/buysellads/'${REPLACEMENT}'/g' package.json

cd icons
sed -i -e 's/buysellads/'${REPLACEMENT}'/g' index.d.ts
sed -i -e 's/buysellads/'${REPLACEMENT}'/g' index.js
sed -i -e 's/buysellads/'${REPLACEMENT}'/g' buysellads.d.ts
sed -i -e 's/buysellads/'${REPLACEMENT}'/g' buysellads.js
sed -i -e 's/buysellads/'${REPLACEMENT}'/g' buysellads.json
mv buysellads.d.ts $REPLACEMENT.d.ts
mv buysellads.js $REPLACEMENT.js
mv buysellads.json $REPLACEMENT.json

cd ../../..

[RobBrazier]

@cwbriscoe how are you using the library?

If you're importing just the icons you need, using the approach introduced in 3.0.0, example detailed in an earlier reply in this thread, buysellads will only be loaded if you are asking for it.

I'm just struggling to understand from the information you've provided why you need to run a script to fix buysellads.js?

My firefox settings are pretty strict with adblock and I don't get these errors

[cwbriscoe]

@RobBrazier I am only importing from the following code in my project.

<script lang="ts">
  import Icon from 'svelte-awesome';
  import { twitter, redditAlien, facebook } from 'svelte-awesome/icons';
</script>

<nav class="flex items-center bg-blue-100 p-2">
  <div class="flex-shrink w-1/3">
    <div class="flex flex-row-reverse space-x-4 space-x-reverse">
      <Icon data={twitter} scale="1.5"/>
      <Icon data={facebook} scale="1.5"/>
      <Icon data={redditAlien} scale="1.5"/>
    </div>
  </div>
</nav>

I don't necessarily think it is a problem with your library. It may just be Braves built-in adblocking being over sensitive, especially when serving content from localhost.

[seofernando25]

I am using v3.0.0 and I am having the same issue with the brave browser with the built-in adblock turned off for localhost. It does work fine with Firefox so not a huge deal for me.

I am pretty sure it has something to do with this script:

Edit: I deleted all references to buysellads in svelte-awesome, did a hard reload and clear cache via dev tools and it then works in Brave Browser. Not an ideal solution but maybe is will help others.

So far I have found two solutions

• Add localhost to your trusted sites or allow list of your ad-blocker

It seems that in dev mode all icons are loaded to your browser even if you import just a few icons.

One of the icons in this case would be the buysellads icon that would probably be picked by your ad-blocker.

The unused icons would be stripped off in a production build

• Manually import each icon.

this latter seems to have done the job.

[cwbriscoe]

@SeoFernando25 I have no doubt that this works with uBlock but I am not using an ad blocking extension. I am using the Brave browser that has built in ad blocking. I do not see any "trusted site" like options in the Brave settings. Like I said, I don't think this is an issue with this library. I provided the script I use to get around the Brave browser issue in case it helps other people that use Brave or a different browser that may have a similar issue. Prod builds work without issue.

I did not try your second option but I will try to remember to the next time I update my dependencies just to see if that would fix it without needing to run my script.

[aaronkai]

Sorry to ghost on this issue. Looking at the comments, I suspect my issue was using Vivaldi, another browser with aggressive filtering. Seems like the issue is not with the library. Thanks for your help.