JLarky Posts - Answer Overflow

JLarky

Explore posts from servers

•Created by JLarky on 10/25/2024 in #support

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 🫠

32 replies

Gaming

Programming