[Bug] Solid.js icon component fails the page build, SVG version works fine

[RATIU5]

This is a very odd and specific bug, and from my tests, it seems to reside with the Solid.js icon component from Tabler Icons. I could be wrong though.

Steps to reproduce

StackBlitz (with Astro) StackBlitz (with Solid Start)

Error

~~This error only happens in Astro using Solid.js.~~ Actually it happens in Solid Start now too. I swear it didn't before.

I get the following error when trying to build the page (with Astro). This error sometimes happens with Solid Start, but reloading and ignoring the errors causes it to go away and everything works fine. Astro doesn't have that, unfortunately.

Using the SVG version of the icons and not the components works fine.

TypeError: Cannot read properties of undefined (reading 'has')
    at parseClass (file:///home/projects/withastro-astro-q3ay9k/node_modules/solid-js/h/dist/h.cjs:77:35)
    at item (file:///home/projects/withastro-astro-q3ay9k/node_modules/solid-js/h/dist/h.cjs:23:17)
    at ret (file:///home/projects/withastro-astro-q3ay9k/node_modules/solid-js/h/dist/h.cjs:15:27)
    at escape (/node_modules/solid-js/web/dist/server.js:593:50)
    at ssrElement (/node_modules/solid-js/web/dist/server.js:554:100)
    at Dynamic (/node_modules/solid-js/web/dist/server.js:821:14)
    at Module.createComponent (/node_modules/solid-js/dist/server.js:293:15)
    at Polymorphic (/node_modules/@kobalte/core/dist/index.jsx:1244:34)
    at Module.createComponent (/node_modules/solid-js/dist/server.js:293:15)
    at SelectIcon (/node_modules/@kobalte/core/dist/index.jsx:7112:32)
    at Module.createComponent (/node_modules/solid-js/dist/server.js:293:15)
    at get children [as children] (/src/components/select.tsx:38:116)
    at Object.get [as children] (/node_modules/solid-js/dist/server.js:314:26)
    at Object.get [as children] (/node_modules/solid-js/dist/server.js:314:26)
    at Object.get [as children] (/node_modules/solid-js/dist/server.js:314:26)
    at Object.get [as children] (/node_modules/solid-js/dist/server.js:314:26)
    at Object.get [as children] (/node_modules/solid-js/dist/server.js:314:26)
    at get children [as children] (/node_modules/@kobalte/core/dist/index.jsx:1250:22)
    at Object.get [as children] (/node_modules/solid-js/dist/server.js:314:26)
    at ssrElement (/node_modules/solid-js/web/dist/server.js:554:112)
    at Dynamic (/node_modules/solid-js/web/dist/server.js:821:14)
    at Module.createComponent (/node_modules/solid-js/dist/server.js:293:15)
    at Polymorphic (/node_modules/@kobalte/core/dist/index.jsx:1244:34)
    at Module.createComponent (/node_modules/solid-js/dist/server.js:293:15)
    at ButtonRoot (/node_modules/@kobalte/core/dist/index.jsx:3068:32)
    at Module.createComponent (/node_modules/solid-js/dist/server.js:293:15)
    at SelectTrigger (/node_modules/@kobalte/core/dist/index.jsx:7485:32)
    at Module.createComponent (/node_modules/solid-js/dist/server.js:293:15)
    at SelectTrigger (/src/components/select.tsx:34:32)
    at Module.createComponent (/node_modules/solid-js/dist/server.js:293:15)
    at get children [as children] (/src/components/select-test.tsx:24:37)
    at Object.get [as children] (/node_modules/solid-js/dist/server.js:314:26)
    at Object.get [as children] (/node_modules/solid-js/dist/server.js:314:26)
    at get children [as children] (/node_modules/@kobalte/core/dist/index.jsx:7352:28)
    at Object.get [as children] (/node_modules/solid-js/dist/server.js:314:26)
    at Object.get [as children] (/node_modules/solid-js/dist/server.js:314:26)
    at get children [as children] (/node_modules/@kobalte/core/dist/index.jsx:4287:20)
    at eval (/node_modules/solid-js/dist/server.js:196:35)
    at eval (/node_modules/solid-js/dist/server.js:157:49)
    at createMemo (/node_modules/solid-js/dist/server.js:83:9)
    at children (/node_modules/solid-js/dist/server.js:157:16)
    at eval (/node_modules/solid-js/dist/server.js:196:14)
    at createMemo (/node_modules/solid-js/dist/server.js:83:9)
    at provider (/node_modules/solid-js/dist/server.js:192:12)
    at Module.createComponent (/node_modules/solid-js/dist/server.js:293:15)
    at PopperRoot (/node_modules/@kobalte/core/dist/index.jsx:4284:32)
    at Module.createComponent (/node_modules/solid-js/dist/server.js:293:15)
    at get children [as children] (/node_modules/@kobalte/core/dist/index.jsx:7346:40)
    at eval (/node_modules/solid-js/dist/server.js:196:35)
    at eval (/node_modules/solid-js/dist/server.js:157:49)

The code it's referencing which appears to be generated?:

    function parseClass(string) {
      const m = string.split(/([\.#]?[^\s#.]+)/);
      if (/^\.|#/.test(m[1])) e = document.createElement("div");
      for (let i = 0; i < m.length; i++) {
        const v = m[i],
          s = v.substring(1, v.length);
        if (!v) continue;
        if (!e) e = r.SVGElements.has(v) ? document.createElementNS("http://www.w3.org/2000/svg", v) : document.createElement(v);else if (v[0] === ".") e.classList.add(s);else if (v[0] === "#") e.setAttribute("id", s);
//                                ^
      }
    }

For the time being, I'll use the SVG versions since this is causing me to halt my progress.

[michaelkimchi]

Hi @RATIU5

This is probably not the right place to ask this but I am getting a bit desperate here 😅

I ran into the same issue and haven't found a way to fix this. Strange enough I only have issues in vitest, vite build and storybook seem to work very well. My setup is vite with bare solidjs.

I am trying to do the SVG way but getting another weird error. Something like this

import { IconUpload } from '@tabler/icons';

<span innerHTML={IconUpload} />

Internal server error: Failed to resolve entry for package "@tabler/icons". The package may have incorrect main/module/exports specified in its package.json: Missing "." specifier in "@tabler/icons" package

If you don't mind can you show some simple example to make SVG to work with solid?

It would be very helpful for many people until we find a way to fix the original issue.

Thanks!

[michaelkimchi]

It seems to be similar to this but no good solutions atm

https://github.com/tabler/tabler-icons/issues/536

[marvin-j97]

solid-icons works fine and contains Tabler icons as well

[RATIU5]

@phungtranminh I just resorted to copying the SVG directly from the site. Like what marvin said, you can use the solid-icons package as those should work fine

[nakasyou]

I also run into the same error and am in trouble.