SolidJS•2mo ago

Uncaught Error: Failed attempt to create new DOM elements during hydration. Check that the libraries

This is my first time trying to create solid component with tsup https://github.com/solidjs-community/tsup-preset-solid and I'm assuming I'm doing something wrong 🙂 I never seen this error message before so I'm at a loss on where to start debugging this 🙂 setup on library side is pretty minimal, here's my index.tsx

import { type Component, createEffect, createSignal } from 'solid-js';
import { generateHydrationScript, hydrate, renderToString } from 'solid-js/web';

export const Hello: Component = () => {
  const [counter, setCounter] = createSignal(0);

  createEffect(() => {
    const interval = setInterval(() => setCounter((c) => c + 1), 1000);
    return () => clearInterval(interval);
  });

  return <div>I want to say hi {counter()}</div>;
};

export function hydrateHello(element: HTMLElement) {
  // render(() => <Hello />, element);
  return () => hydrate(() => <Hello />, element);
}

export function renderHtml() {
  const script = generateHydrationScript();
  const html = renderToString(() => <Hello />);
  return { script, html };
}

import { type Component, createEffect, createSignal } from 'solid-js';
import { generateHydrationScript, hydrate, renderToString } from 'solid-js/web';

export const Hello: Component = () => {
  const [counter, setCounter] = createSignal(0);

  createEffect(() => {
    const interval = setInterval(() => setCounter((c) => c + 1), 1000);
    return () => clearInterval(interval);
  });

  return <div>I want to say hi {counter()}</div>;
};

export function hydrateHello(element: HTMLElement) {
  // render(() => <Hello />, element);
  return () => hydrate(() => <Hello />, element);
}

export function renderHtml() {
  const script = generateHydrationScript();
  const html = renderToString(() => <Hello />);
  return { script, html };
}

now on the consumer side I'm trying to call renderHtml and hydrateHello. It seem to be working when my component returns a string (instead of jsx) or if I use render instead of hydrate but the combination of using hydrate and using html template is what is killing it 🫠

GitHub

GitHub - solidjs-community/tsup-preset-solid: Preset for building y...

Preset for building your SolidJS packages with tsup. - solidjs-community/tsup-preset-solid

17 Replies

JLarkyOP•2mo ago

the whole error message didn't fit in the title 🙂

Uncaught Error: Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.

Uncaught Error: Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.

JLarkyOP•2mo ago

https://github.com/ryansolid/dom-expressions/blob/b7a9d97027da77cc8f7d774edb655b074a3e5d41/packages/dom-expressions/src/client.js#L72

GitHub

dom-expressions/packages/dom-expressions/src/client.js at b7a9d9702...

A Fine-Grained Runtime for Performant DOM Rendering - ryansolid/dom-expressions

JLarkyOP•2mo ago

played with that a bit more from Astro. If I have solid plugin configured for Astro I can just use .jsx version of the component and everything works. If I force it to use .js then I see the same error. I guess that means that package didn't compile solid to plain javascript enough 😄 it still requires some pre-processing of the file before I can use it

JLarkyOP•2mo ago

it looks like that check was added in 0.37.1 version of dom-expressions (https://github.com/ryansolid/dom-expressions/commit/bc52a382e8a20dcd39a697f0fe4776633f6b2700)

GitHub

stricter hydration errors · ryansolid/dom-expressions@bc52a38

mdynnl•2mo ago

https://github.com/solidjs-community/tsup-preset-solid/blob/f711eb2ceb811986c6cbedea44e3e6d0a12fd5a9/src/preset.ts#L250 doesn't take hydratable assuming it kept the same API as babel plugin

JLarkyOP•2mo ago

thanks! that's should be there for client build, right?

mdynnl•2mo ago

Both ssr and dom require hydratable This is likely intentional and solid pipeline should be integrated to whatever setup because there'd be a couple of output formats if you combine it with js output formats i.e 2 (cjs, esm) * 2 (ssr, dom) * 2 (hydratable, normal) so instead we just simply ship the jsx using solid export condition and let the solid pipeline handle it

JLarkyOP•2mo ago

thank you so much! I added hydratable and it works now! here's the PR https://github.com/solidjs-community/tsup-preset-solid/pull/11

GitHub

add hydratable: true to solid by JLarky · Pull Request #11 · solidj...

this is a follow up for a issue I noticed when using this package https://discord.com/channels/722131463138705510/1299231319884169216/1299231319884169216

JLarkyOP•2mo ago

@davedbase do you know who would be a good person to look at this? 🙂

davedbase•2mo ago

Yep! @thetarnav has maintained it for a while. I wonder if @amoutonbrady is around and might have an idea as well.

JLarkyOP•2mo ago

thanks!

thetarnav•2mo ago

I’m a bit skeptical about it. The whole point of shipping jsx was that the user would handle how it is compiled. Now you want to change how the buildless output works? Are you using it in a buildless setup? Since the precompiled jsx is for a SPA use, the only one you can get with buildless I think, it doesn’t need hydration. I know there is also an ssr jsx output, but that was just to make the server entries be usable in node. basically this

JLarkyOP•2mo ago

I'm reading this as "if you want your solid library code to work with SSR you have to use solid in the app", but that's not what I'm trying to do here I'm trying to use it from Remix app the way solid works you kind of have to care about all of those options and you have to have all of those flags on and off depending on how you use it my problem right now is that solid preset doesn't have a way to set that flag if it did the way I would like to see it work is something like one entry point for hydratable code, one entry point for SPA there's of course a bigger issue is that preset doesn't allow you to configure any of the solid options at all 🙂 if it did I would have just used that but if it tries to be opinionated I think it makes sense to have the option of hydratable JSX like there's an option for dev_entry

thetarnav•2mo ago

this could be useful anyway but I also wonder what the default should do At some point the complexity has to be on the user to precompile the component themselves Like even if the preset was outputting another, a hydratable entry How would you use it export conditions by default only cover server/browser not ssr/no-ssr Unless I’m missing something

JLarkyOP•2mo ago

Right, I feel like hydratable should be a default, but I can see that this could be not backwards compatible Regardless if it's a default or not there should be an option to set that value 🙂 Do you want me to work on a PR that could be implementing that?

thetarnav•2mo ago

being about to change plugin options? That one I wouldn’t mind

JLarkyOP•2mo ago

okay, I pushed new PR 🙂

Gaming

Programming

Uncaught Error: Failed attempt to create new DOM elements during hydration. Check that the libraries