Icons broken with Solid v1.8.0

[caseybaggz]

After upgrading I'm seeing massive issues with the icon rendering that returns empty svg tags with no content. If you remove the code then save, they appear - but break again when the page refreshes.

All the blank spots should be using Github Icons.

[rpivo]

Related to https://github.com/solidjs/solid/issues/1911

[rpivo]

If you upgrade to solid-js@1.8.1, the icons may work, but there will be a warning in the console.

[caseybaggz]

Still broken unfortunately, however, the beta candidate does fix this issue in the UI with the caveat of still having the hydration error which should probably be fixed in that release:

Error: Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.
    at create (dev.js:571:13)
    at dev.js:579:63
    at untrack (dev.js:495:33)
    at Function.cloneNode (dev.js:579:13)
    at index.js:11:25
    at IconTemplate (index.js:50:3)
    at OcStack2 (index.js:2961:14)
    at dev.js:616:16
    at untrack (dev.js:499:12)
    at Object.fn (dev.js:612:7)

EDIT Looks like the Beta version is still broken failing both our unit tests and deploy-previews (due to hydration issues and missing content).

[rpivo]

Yeah, seeing the same issues on my end as well 😕

I can't speak for the maintainers of this library, but sounds like the build it exports needs to be hydratable based on discussion in Solid's discord.

Others there have recommended trying unocss + the unocss icons plugin in place of solid-icons in the event that this isn't fixed soon. I am migrating from vanilla css and solid-icons to unocss + icons plugin based on hearing that someone else in the discord also made the same switch. I have it working on my end -- just starting to remove the old icons and replace them.

https://unocss.dev/guide/ https://unocss.dev/presets/icons https://icones.js.org/collection/all

[caseybaggz]

I use Panda which I found was an overall better experience than UnoCSS so I guess my only option now is to take all the icons I use local. 🙈 Doing that for animated Icons anyways, so why not everything? 😞

[rpivo]

Yeah, 😕 luckily I only had six or so files to migrate, and even then I didn't want to spend my time like this. Maybe solid-icons will make an update here.

[x64Bits]

Hello everyone, thank you for reporting this, did you check if, as mentioned above, is this resolved in the beta version? I have not been able to launch because I plan to include in the next version a solution for the problem that was happening when creating a build with astro, I will try to release a version sooner to solve this problem since 1.8.

[xNoobyyy]

Still broken unfortunately, however, the beta candidate does fix this issue in the UI with the caveat of still having the hydration error which should probably be fixed in that release:

Error: Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.
    at create (dev.js:571:13)
    at dev.js:579:63
    at untrack (dev.js:495:33)
    at Function.cloneNode (dev.js:579:13)
    at index.js:11:25
    at IconTemplate (index.js:50:3)
    at OcStack2 (index.js:2961:14)
    at dev.js:616:16
    at untrack (dev.js:499:12)
    at Object.fn (dev.js:612:7)

EDIT Looks like the Beta version is still broken failing both our unit tests and deploy-previews (due to hydration issues and missing content).

this is still happening to me in the beta version as already mentioned

[x64Bits]

I have sent a new beta version (1.1.0-beta.2) that solves this problem in version 1.8 of solid-js, I have changed the import strategy avoiding importing a precompiled (Ryan suggested this on discord), with these changes the astro and cloudflare compilation now works correctly, please if anyone can test this version in their projects to send it in a stable version as soon as possible, greetings.

[greg-hammond]

Installing 1.1.0-beta.2 fixed the initial icon problem I was seeing, but actually started crashing other pages that use solid-icons.

"Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."

IDK if this error message strictly belongs to solid-js or solid-icons, but I was forced to roll back the change. I guess a few missing icons is better than failing pages in prod...

@x64Bits is this actively being worked on with ryan and crew?

[xNoobyyy]

Installing 1.1.0-beta.2 fixed the initial icon problem I was seeing, but actually started crashing other pages that use solid-icons.

"Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."

IDK if this error message strictly belongs to solid-js or solid-icons, but I was forced to roll back the change. I guess a few missing icons is better than failing pages in prod...

@x64Bits is this actively being worked on with ryan and crew?

can confirm, cant use the library atm :/

[x64Bits]

Sorry for the delay in responding, I had difficulties attending to the project these last two weeks, but I'm already addressing this problem again, this other issue reported something similar related to hydration #56, I would like to find out if it is the same problem, could someone help me? Is it happening to you to create a small sandbox using solid-icons@1.1.0-beta.2?

Regarding whether I'm working with the solid team, I am always very attentive to the community but I don't interact much, luckily Ryan explained about this in the SSR channel on discord, when i asked.

[x64Bits]

The latest issue #56 @elijah629 helped me reproduce the error, I'm submitting changes in the latest beta.3 version, it seems to me that once I verify that these changes work well, I can release 1.1.0

[x64Bits]

As with #56, I'll assume it's been resolved since the last update, thank you very much for all the feedback!