preact rendering <style> tag inside <noscript>, whereas react does not #2797
Comments
|
That sounds like React isn't following the HTML-Spec correctly. It states:
Which translates as any of the usual elements is a valid descendant of a Looks like React has a bug there. I can't come up for valid reasons to disallow style-tags in that context as it is often used to customize the fallback experience on sites I've seen. |
|
@marvinhagemeister yeah, i understand your reasoning here. digging into it a bit more, it seems react made a conscious decision to ignore the contents of the Which kind of makes sense, if you think about it -- if react is there, doing things on the client, then the |
|
Here's a patch that makes Preact skip noscript contents on the client only: import { options } from 'preact';
const CLIENT = typeof document !== 'undefined';
const old = options.vnode;
options.vnode = vnode => {
if (vnode.type === 'noscript' && CLIENT) {
vnode.props.children = null;
}
if (old) old(vnode);
}; |
|
@developit thanks! I didn't know about the options hooks API, but i looked it over and I think I understand. I'm not exactly sure where I'd implement this, but I'm guessing if I stick it in some entry-type file to hook in before Preact does any work, that would be the ticket. I'll give it a go. Appreciate the help! |
|
@jaredh159 yep! Just have it run before your component code. |
This fixes the issue from #2797, and [this issue](https://zenn.dev/d_suke/scraps/f7013c4554ac43) using Next.js's `<Image>` component with Preact.
* [compat] Skip rendering <noscript> contents on the client This fixes the issue from #2797, and [this issue](https://zenn.dev/d_suke/scraps/f7013c4554ac43) using Next.js's `<Image>` component with Preact. * Update render.js Co-authored-by: Jovi De Croock <decroockjovi@gmail.com>
I'm not sure if this matters to the library maintainers, or how much compatibility/interop with React is a goal, but I noticed a subtle difference between React and Preact that caused a fairly big blocker trying to switch a Gatsby site over to preact.
Basically, this jsx:
Renders differently between React and preact. In react, you get an empty
<noscript>tag. Preact renders out the<style>tag inside the noscript. Codepens below.The use-case here is that I'm trying to use
gatsby-background-imagewhich adds styles tonoscriptlike the example above. With react, nothing renders, but with preact, I get extra style tags which load in un-optimized images, destroying any performance benefit gained from switching to preact.Reproduction
Codepen with React:
https://codepen.io/jaredh159/pen/NWrGyPq?editors=1010
Codepan with Preact:
https://codepen.io/jaredh159/pen/mdEeXJg?editors=1010
Note: you'll have to use the dev tools to inspect to see the
<noscript>contents, as it's not visible, of course.Steps to reproduce
See codepens above ^^^
Expected Behavior
I would have hoped that preact matched the behavior of react.
Actual Behavior
preact rendered the contents of the
<noscript>tag, unlike React.The text was updated successfully, but these errors were encountered: