search

tabler / tabler-icons

A set of over 5700 free MIT-licensed high-quality SVG icons for you to use in your web projects.
https://tabler.io/icons
MIT License
18.21k stars 911 forks source link

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

Open RATIU5 opened 1 year ago

RATIU5 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

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

marvin-j97 commented 1 year ago

solid-icons works fine and contains Tabler icons as well

RATIU5 commented 1 year ago

@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 commented 1 year ago

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