Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[馃悶] Importing image as a component and passing it as a prop causes error in certain cases. "Error: Code(3): Only primitive and object literals can be serialized" #5647

Open
linkfang opened this issue Dec 28, 2023 · 0 comments
Labels
STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working

Comments

@linkfang
Copy link
Contributor

linkfang commented Dec 28, 2023

Which component is affected?

Qwik Runtime

Describe the bug

Doing:
The real use case is the same as this issue I opened, but this is a different bug so I opened a new one.
In the real use case, I have a list of cards with images on them and I would like to utilize Qwik image optimization so I need to import images as components and pass them in a card component. Preview use case here: https://linkfang-portfolio.vercel.app/web-apps/

Repro is simplified to just an element with a button.

Expect:
I expect the web app will run properly without crash.

Happening:
The web app will crash when I:

  1. Import the image as a component
  2. Pass it as a prop into another component (card component)
  3. In card component, including an event handler that will change a boolean signal
  4. In card component, put the image prop into a ternary

With all 4 conditions above, the app will crash.

In the repro,

  1. Passing imported image component as prop won't cause an issue;
  2. Using ternary with a non-imported image component won't cause the issue.
  3. Using imported image component inside the desired component (not passing as a prop) in a ternary won't cause the issue.
  4. Using imported image component and pass it as a prop and use it with ternary BUT without any event handler that will change the signal won't cause the issue.

Reproduction

https://stackblitz.com/edit/qwik-starter-vif4tk?file=src%2Froutes%2Findex.tsx

Steps to reproduce

Open the repro link should automatically run npm i & npm run dev, when everything is up and running,

  1. Click on the 2 buttons on the page to see everything is working fine
  2. Uncomment the code in line 70, then the app will crash with error:
QWIK ERROR Error: Code(3): Only primitive and object literals can be serialized

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
    Memory: 6.10 GB / 15.60 GB
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.12.1 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (120.0.2210.91)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @builder.io/qwik: ^1.3.1 => 1.3.1
    @builder.io/qwik-city: ^1.3.1 => 1.3.1
    @builder.io/vite-plugin-macro: ~0.0.7 => 0.0.7
    undici: ^5.26.0 => 5.28.2
    vite: ^5.0.6 => 5.0.10

Additional Information

No response

@linkfang linkfang added STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working labels Dec 28, 2023
Varixo added a commit to Varixo/qwik that referenced this issue Mar 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant