qwikifiers / qwikifiers/qwik-ui
[🐞] Tabs & Inline components: Only primitive and object literals can be serialized
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 695
- Forks
- 142
- PR merge metrics
- No merged PRs in 30d
Description
Which package is affected?
Headless Kit
Describe the bug
When putting items inside the tabs, we get an error from Qwik that only primitive and object literals can be serialized.
The reproduction below, is putting a simple icon in the tabs, and it breaks.
This is caused by the Icon being an inline component, if we wrap it in component$ it works fine.
Reproduction
https://github.com/thejackshelton/tabs-repro
Steps to reproduce
pnpm i
pnpm dev
open dev server
System Info
System:
OS: macOS 14.5
CPU: (8) arm64 Apple M3
Memory: 196.84 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.12.2 - /usr/local/bin/node
npm: 10.5.0 - /usr/local/bin/npm
pnpm: 9.5.0 - /usr/local/bin/pnpm
bun: 1.1.7 - ~/.bun/bin/bun
Browsers:
Brave Browser: 125.1.66.118
Chrome: 126.0.6478.183
Safari: 17.5
npmPackages:
@builder.io/qwik: ^1.7.1 => 1.7.1
@builder.io/qwik-city: ^1.7.1 => 1.7.1
@qwik-ui/headless: ^0.5.0 => 0.5.0
typescript: 5.4.5 => 5.4.5
undici: * => 6.19.4
vite: ^5.2.10 => 5.3.4
Additional Information
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked tabs reproduction: install dependencies with pnpm i, run pnpm dev, and reproduce the error by placing an inline icon in a tab item. Trace how Headless Kit tabs serialize their items and compare the behavior with the component$ wrapper. Done means inline icons work without triggering Qwik's serialization error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100