"must be non null" bug - version 0.23.0 | Qwik | Page 1

sharp venture Mar 17, 2023, 6:34 PM

#

I dont know why this is coming up. Cant debug it :/

south thorn Mar 17, 2023, 6:36 PM

#

We will fix asap

sharp venture Mar 17, 2023, 7:00 PM

#

♥️🤙🏽

sharp venture Mar 20, 2023, 8:35 AM

#

south thorn We will fix asap

Hey mate it was fixed for me, now I have the same issue.

 "@builder.io/qwik": "0.23.0",
 "@builder.io/qwik-city": "0.6.5",

Bildschirmfoto_2023-03-20_um_09.35.26.png

#

New bug with version 0.23.0

sharp venture Mar 20, 2023, 9:52 AM

#

Okay I found out, its triggered by the false onChange-Listener:

 <input
  value={pageSearch.value}
  onChange={(e) => (pageSearch.value = e.target.value)}
  placeholder="Seite suchen..."
/>

When I change it to its working onChange --> onInput$

#

Okay the second part its a bit confusing:
I iterate through an array and just display a Title of a pages like:

{pages.map((page,key) => 
  <div>
    <pre>{JSON.stringify(page.Title, undefined, 4)}</pre> //displays my title
    <p>{page.Title}</p> //<-- is throwing the error. Idk why :D 
  </div>
)}

When I commenting out this p-tag everything is working, so it feels like a bug

#

Okay now its get more weired :D.
If im doing this its working either:
@south thorn

<p>{page.Title.toString()}</p>

I dont want to! 😄 hahahha

sharp venture Mar 20, 2023, 10:46 AM

#

Okay one more:

 <div
      class={className.toString()}
      ref={areaRef}
      dangerouslySetInnerHTML={content} //<-- this line throw this error too
    />

sharp venture Mar 20, 2023, 11:13 AM

#

"must be non null" bug - version 0.23.0

boreal olive Mar 20, 2023, 11:17 AM

#

I got it

#

use QRL to fix it

#

<input
value={pageSearch.value}
onChange={$((e) => (pageSearch.value = e.target.value))}
placeholder="Seite suchen..."
/>

#

if it's same as what i face last night

bold solar Mar 20, 2023, 11:22 AM

#

I have a similar error when returning data from routeLoader$, the data comes from cloudflare's d1 database.
I don't get the error in development mode, but when i deploy it locally.
And when i deploy it to cloudflare 's servers the page where the routeLoader$ is used crashes.
The solution i found is to create a new object from the data i get from the database and return it from the loader, the object returned from the database is exactly the same as the newly created one, and this is really confusing, i can't figure out what's the problem exactly !

sharp venture Mar 20, 2023, 11:27 AM

#

boreal olive <input value={pageSearch.value} onChange={$((e) => (pageSearch.value = e.tar...

you can do this instead, maybe its more qwik best practise like:

onChange$={() => (...)}

But thats not the biggest problem. The problem with the toString() and the dangerouslySetInnerHTML is much greater I think. The onChange stuff its just a missed issue message, the other both things are not working the right way imo.

bold solar Mar 20, 2023, 11:39 AM

#

For me it's a different use case, it's not related to events on the page, i'm just fetching a list of comments from the database and map over it to display the comments on the page without any interaction with the comments for the moment.
But the error stack trace is the same i think, i followed the stack trace and looked to the source, i seems to me (if i understood correctly) that qwik is trying to analyse the data i'm passing to the components and look if it's serializable, it seems that my data doesn't pass the test of serialization even it's just a normal native JavaScript object, the weird part is that it passes when i recreate the object before returning it from the loader, and as far as i can tell, the object remains exactly the same, the only difference is that the object that crashes the app is returned directly without modification!

south thorn Mar 20, 2023, 11:39 AM

#

I am confused here, many different things

#

🙂

#

The simplest the code example that reproduces it, the fastest i can jump to fix it!

#

also full components, not pieces, usually the bug is not in the piece of code you think it is haha

#

need a full code i can run and see the error 🙂

#

happy to work on this issues today!

bold solar Mar 20, 2023, 11:52 AM

#

south thorn 🙂

I don't have my laptop for now, but i'll try to write a simple example here, (for my use case)
Take a look at this:

const useGetComents = routeLoader$((ev) => {
    const {results} = ev.platform.DB.prepare('SELECT * FROM Comments').all()
    return results
}
)

export default component$(() => {
    const comments = useGetComments()

    return(
        <ul>
            {
                        comments.value.map(comment => (
<li>{comment.text}</li>
))
            }
        </ul>
    )
}
)

#

When i deploy this locally i get an error with same stack trace

south thorn Mar 20, 2023, 11:54 AM

#

it's unlikelt i can reproduce since i dont have access to your DB, could you make later a repo with a mock of the data?

#

i guess the bug is not related to the DB itself

#

something you cna try in the meantime is to give every <li> a key

bold solar Mar 20, 2023, 11:55 AM

#

When i recreate the results object and return it works fine

south thorn Mar 20, 2023, 11:55 AM

#

<li key={comment.id}/>

#

right! that's why i cant fix it either haha

bold solar Mar 20, 2023, 11:55 AM

#

I set the keys

#

if i have time latter i will try to make a reproduction of it and share it here

south thorn Mar 20, 2023, 11:56 AM

#

cool! if you can open an issue even better! we track every issue back to a new e2e test

#

so helps to avoid regressions!

bold solar Mar 20, 2023, 11:57 AM

#

Okey 🙂

sharp venture Mar 20, 2023, 12:37 PM

#

I tried to reproduce, and like anytime its not bugged, just on my whole project. Oh lord!

sharp venture Mar 20, 2023, 12:58 PM

#

Okay I tried to reproduce it but I cant. Its cursed.
This fix everything for me:

old approach:
  const getPage = getPageLoader().value;
  const pageD = useStore(
    { data: getPage },
    { deep: true }
  );

new approach:
const getPage = getPageLoader().value;
  const pageD = useStore(
    { data: JSON.parse(JSON.stringify(getPage)) },
    { deep: true }
  );

Side info: my data comes from supabase (getPageLoader();).
Im not sure what happen here

south thorn Mar 20, 2023, 1:01 PM

#

why are you copying the getPageLoader() into a store?

sharp venture Mar 20, 2023, 1:12 PM

#

to recieve reactivity

#

Yep thats the reason, If im just using the routeLoader and not transfer it into an useStore its working.

#

I built an CMS System where you could edit thing via live edit, so it need to be reactive. thats the reason I transfer my loader$ into an useStore-Object

bold solar Mar 20, 2023, 9:36 PM

#

@south thorn i have created an issue here: https://github.com/BuilderIO/qwik/issues/3449 for my use case, but apparently it's not the exact same issue that @sharp venture has mentioned, but they do have some common traces, i don't know if it's the same problem 😅

GitHub

[🐞] QWIK ERROR Error: Code(3) when returning the cloudflare d1's re...

Which component is affected? Qwik City (routing) Describe the bug i have this code import { component$ } from "@builder.io/qwik"; import { routeLoader$, type RequestEventLoader, } from &q...

sharp venture Mar 26, 2023, 12:52 PM

#

Still existing, now with simple useSignal values

wet moth Apr 17, 2023, 6:25 PM

#

i have a problem with the error must be non null, i use boolean variable to use if else with these simbol true ? option1 : option2, but i use it and show the error "Internal server error: must be non null" someone can help me with this problem?

sharp venture Apr 17, 2023, 7:20 PM

#

wet moth i have a problem with the error must be non null, i use boolean variable to use ...

its a really bad fix but sometime that will help:

//your code:
{officeHour.value ? <p>if true</p> : <p>if false</p>}


//possible workaround (but dirty):
{officeHour.value.toString() === "true" ? <p>if true</p> : <p>if false</p>}

#

Sometime it works for me

#

Do you using tsx or jsx ?

wet moth Apr 17, 2023, 7:27 PM

#

I have a onClick$ before the code, if remove this onClick$, no show the error but i leave the onClick$ show the error, i think than error is for the onClick$

#

But i need the method onClick$ to do the change value from false to true in the variable

wet moth Apr 17, 2023, 7:46 PM

#

if use string in the condicional no show error but if use h1 show error

sharp venture Apr 17, 2023, 9:13 PM

#

Try to reproduce and open a issue 🙂

boreal olive Apr 17, 2023, 10:29 PM

#

could you try with onClick$={() => { //your code }}

#"must be non null" bug - version 0.23.0