SolidJS•3y ago

solidjs not putting element in the correct spot.

https://derock.media/T45T7t.png https://derock.media/vTzp6m.png As you can see, for some reason, props.children is being placed outside of where it's supposed to be.

{image.file} • {unknown_property}

4 Replies

DerockOP•3y ago

<ProjectCard {...other props ommitted}>
  <pre>discord-html-transcripts</pre> is an open-source package for developers looking to create 
  Discord-style chat transcripts. It is built using <em>StencilJS</em> and <em>React SSR</em>. 
  It currently has over <em>20k</em> weekly downloads on npmjs.
</ProjectCard>

<ProjectCard {...other props ommitted}>
  <pre>discord-html-transcripts</pre> is an open-source package for developers looking to create 
  Discord-style chat transcripts. It is built using <em>StencilJS</em> and <em>React SSR</em>. 
  It currently has over <em>20k</em> weekly downloads on npmjs.
</ProjectCard>

and in the ProjectCard component,

 <p class="...tailwind styles here...">
  {props.children}
</p>

 <p class="...tailwind styles here...">
  {props.children}
</p>

is becoming

<p class="...tailwind styles here..."> <!-- WHERE IT SHOULD BE --> </p>
<pre data-hk="...">discord-html-transcripts</pre> 
is an open-source package for developers looking to create Discord-style chat transcripts. It is built using 
<em data-hk="...">StencilJS</em>
and 
<em data-hk="...">React SSR</em>. 
It currently has over 
<em data-hk="...">20k</em> 
weekly downloads on npmjs.

<p class="...tailwind styles here..."> <!-- WHERE IT SHOULD BE --> </p>
<pre data-hk="...">discord-html-transcripts</pre> 
is an open-source package for developers looking to create Discord-style chat transcripts. It is built using 
<em data-hk="...">StencilJS</em>
and 
<em data-hk="...">React SSR</em>. 
It currently has over 
<em data-hk="...">20k</em> 
weekly downloads on npmjs.

the issue doesn't happen 100% of the time, but im unsure of what conditions are changed when it does decide to place it outside the correct spot

DerockOP•3y ago

the following warnings show up:

DerockOP•3y ago

i made this quick demo, https://replit.com/@derock/some-solid-testing if you go here: https://some-solid-testing.derock.repl.co and inspect the dom, the text between text before child and text after child should be inside of a div (and colored red) but it is not is this a solid.js or solid-start bug? tried in the solid.js sandbox, works there looks like a solid-start error -- filing a bug report. https://github.com/solidjs/solid-start/issues/560

Unknown User•2y ago

Message Not Public

Gaming

Programming

solidjs not putting element in the correct spot.