search

kobaltedev / kobalte

A UI toolkit for building accessible web apps and design systems with SolidJS.
https://kobalte.dev
MIT License
1.22k stars 62 forks source link

(Select Component) Cannot read properties of undefined (reading 'has') #212

Closed sek-consulting closed 1 year ago

sek-consulting commented 1 year ago

Describe the bug When trying the Select example I get a fullscreen error message:

TypeError: Cannot read properties of undefined (reading 'has')
    at parseClass (C:\workspace\jd-crm\node_modules\.pnpm\solid-js@1.7.4\node_modules\solid-js\h\dist\h.cjs:77:35)
    at item (C:\workspace\jd-crm\node_modules\.pnpm\solid-js@1.7.4\node_modules\solid-js\h\dist\h.cjs:23:17)
    at ret (C:\workspace\jd-crm\node_modules\.pnpm\solid-js@1.7.4\node_modules\solid-js\h\dist\h.cjs:15:27)
    at escape (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/web/dist/server.js:338:50)
    at ssrElement (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/web/dist/server.js:300:100)
    at Dynamic (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/web/dist/server.js:553:14)
    at Proxy.createComponent (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:310:15)
    at Polymorphic (/node_modules/.pnpm/@kobalte+core@0.9.5_solid-js@1.7.4/node_modules/@kobalte/core/dist/source/polymorphic/polymorphic.jsx:30:34)
    at Proxy.createComponent (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:310:15)
    at SelectIcon (/node_modules/.pnpm/@kobalte+core@0.9.5_solid-js@1.7.4/node_modules/@kobalte/core/dist/source/select/select-icon.jsx:22:32)
    at Proxy.createComponent (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:310:15)
    at get children [as children] (/src/routes/index.tsx:51:37)
    at Object.get [as children] (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:331:26)
    at Object.get [as children] (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:331:26)
    at Object.get [as children] (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:331:26)
    at Object.get [as children] (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:331:26)
    at get children [as children] (/node_modules/.pnpm/@kobalte+core@0.9.5_solid-js@1.7.4/node_modules/@kobalte/core/dist/source/polymorphic/polymorphic.jsx:36:22)
    at Object.get [as children] (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:331:26)
    at ssrElement (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/web/dist/server.js:300:112)
    at Dynamic (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/web/dist/server.js:553:14)
    at Proxy.createComponent (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:310:15)
    at Polymorphic (/node_modules/.pnpm/@kobalte+core@0.9.5_solid-js@1.7.4/node_modules/@kobalte/core/dist/source/polymorphic/polymorphic.jsx:30:34)
    at Proxy.createComponent (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:310:15)
    at ButtonRoot (/node_modules/.pnpm/@kobalte+core@0.9.5_solid-js@1.7.4/node_modules/@kobalte/core/dist/source/button/button-root.jsx:58:32)
    at Proxy.createComponent (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:310:15)
    at SelectTrigger (/node_modules/.pnpm/@kobalte+core@0.9.5_solid-js@1.7.4/node_modules/@kobalte/core/dist/source/select/select-trigger.jsx:133:32)
    at Proxy.createComponent (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:310:15)
    at get children [as children] (/src/routes/index.tsx:46:37)
    at Object.get [as children] (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:331:26)
    at Object.get [as children] (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:331:26)
    at Object.get [as children] (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:331:26)
    at get children [as children] (/node_modules/.pnpm/@kobalte+core@0.9.5_solid-js@1.7.4/node_modules/@kobalte/core/dist/source/polymorphic/polymorphic.jsx:36:22)
    at Object.get [as children] (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:331:26)
    at ssrElement (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/web/dist/server.js:300:112)
    at Dynamic (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/web/dist/server.js:553:14)
    at Proxy.createComponent (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:310:15)
    at Polymorphic (/node_modules/.pnpm/@kobalte+core@0.9.5_solid-js@1.7.4/node_modules/@kobalte/core/dist/source/polymorphic/polymorphic.jsx:30:34)
    at Proxy.createComponent (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:310:15)
    at get children [as children] (/node_modules/.pnpm/@kobalte+core@0.9.5_solid-js@1.7.4/node_modules/@kobalte/core/dist/source/select/select-base.jsx:243:44)
    at Object.get [as children] (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:331:26)
    at Object.get [as children] (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:331:26)
    at get children [as children] (/node_modules/.pnpm/@kobalte+core@0.9.5_solid-js@1.7.4/node_modules/@kobalte/core/dist/source/popper/popper-root.jsx:211:20)
    at file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:213:35
    at file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:174:49
    at createMemo (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:83:9)
    at children (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:174:16)
    at file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:213:14
    at createMemo (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:83:9)
    at provider (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:209:12)
    at Proxy.createComponent (file:///C:/workspace/jd-crm/node_modules/.pnpm/solid-js@1.7.4/node_modules/solid-js/dist/server.js:310:15)

To Reproduce Steps to reproduce the behavior:

  1. create a simple solidstart application (I used create-jd-app)
  2. create a Home Component with the following code: 
    
import { type VoidComponent } from "solid-js"

import { Select } from "@kobalte/core" import { Check, ChevronDown } from "lucide-solid"

const Home: VoidComponent = () => { return (

( {props.item.rawValue} )} > >{(state) => state.selectedOption()}

) }

export default Home

3. start the application
4. see the error

**Expected behavior**
https://kobalte.dev/docs/core/components/select 
the expected behavior is the first example

**Screenshots**
![grafik](https://user-images.githubusercontent.com/8871906/236670251-5a50992e-608a-4051-917f-5a8966e3f5ed.png)

**Versions**

{ "name": "jd-crm", "scripts": { [...] }, "type": "module", "devDependencies": { "@types/node": "^18.16.3", "@typescript-eslint/eslint-plugin": "^5.59.2", "@typescript-eslint/parser": "^5.59.2", "autoprefixer": "^10.4.14", "eslint": "^8.39.0", "eslint-plugin-import": "^2.27.5", "eslint-plugin-solid": "^0.12.1", "postcss": "^8.4.23", "prisma": "^4.13.0", "solid-start-node": "^0.2.26", "tailwindcss": "^3.3.2", "typescript": "^5.0.4", "vite": "^4.3.5" }, "dependencies": { "@auth/core": "^0.5.1", "@fontsource/inter": "^4.5.15", "@kobalte/core": "^0.9.5", "@modular-forms/solid": "^0.13.1", "@next-auth/prisma-adapter": "^1.0.6", "@prisma/client": "^4.13.0", "@prpc/solid": "^0.2.33", "@prpc/vite": "^0.3.21", "@solid-auth/base": "^2.0.2", "@solidjs/meta": "^0.28.4", "@solidjs/router": "^0.8.2", "@tanstack/solid-query": "5.0.0-alpha.28", "class-variance-authority": "^0.6.0", "clsx": "^1.2.1", "lucide-solid": "^0.92.0", "solid-js": "^1.7.4", "solid-start": "^0.2.26", "tailwind-merge": "^1.12.0", "undici": "5.22.0", "zod": "^3.21.4" }, "engines": { "node": ">=16" } }

sek-consulting commented 1 year ago

Node.js: v18.14.0

fabien-ml commented 1 year ago

Hi, have you tried to remove lucide-solid, I remember having issue with this lib. Without it the code snippet above work as expected: https://stackblitz.com/edit/kobalte-playground-594rkk?file=src%2FApp.tsx

sek-consulting commented 1 year ago

Thank you for the fast solution! Removing the lucide icons solved all of my issues :)

Looks like I need to hunt for another icon library that fits the style of @shadcn/ui whose components I'm porting to solidjs with the help of your awesome @kobalt/core <3

fabien-ml commented 1 year ago

You can also get lucide icons on https://icones.js.org/collection/lucide, but you have to copy paste them in your project by hand 😅.