SolidJS•10mo ago

weird behavior: a button declared in TSX with onClick does not have onClick in the final html?

o/ i have this

export const FORM_URL = "https://forms.gle/..."

export default function App() {
  return (
    <Router
      root={(props) => (
        <>
          <nav class={"w-full bg-opacity-10 bg-gray-400 flex flex-row justify-between text-lg"}>
            <div/>
            <Row>
              <button class={"p-4 font-semibold"} onClick={() => window.open(FORM_URL, "_blank")?.focus()}>Sign up for pre-release</button>
            </Row>
          </nav>
          <Suspense>{props.children}</Suspense>
        </>
      )}
    >
      <FileRoutes/>
    </Router>
  );
}

export const FORM_URL = "https://forms.gle/..."

export default function App() {
  return (
    <Router
      root={(props) => (
        <>
          <nav class={"w-full bg-opacity-10 bg-gray-400 flex flex-row justify-between text-lg"}>
            <div/>
            <Row>
              <button class={"p-4 font-semibold"} onClick={() => window.open(FORM_URL, "_blank")?.focus()}>Sign up for pre-release</button>
            </Row>
          </nav>
          <Suspense>{props.children}</Suspense>
        </>
      )}
    >
      <FileRoutes/>
    </Router>
  );
}

clicking on the button does nothing. inspecting the output html, i see this:

19 Replies

RevxrsalOP•10mo ago

output html:

<button data-hk="0-0-0-0-0-0-0-0-1-0-0-0-0-1-1" class="p-4 font-semibold">Sign up for pre-release</button>

<button data-hk="0-0-0-0-0-0-0-0-1-0-0-0-0-1-1" class="p-4 font-semibold">Sign up for pre-release</button>

any idea? this button was originally in a separate component, and this component was used multiple times. sometimes it worked, and many times it didn't.

Alex Lohr•10mo ago

The event is deferred from the container where the topmost parent is rendered.

RevxrsalOP•10mo ago

not sure i understand

Alex Lohr•10mo ago

Just put a console.log into the event handler to check if it is working or if the hydration failed. Also, are there errors in the console?

RevxrsalOP•10mo ago

             <button class={"p-4 font-semibold"} onclick={() => {
                console.log("clicked")
                window.open(FORM_URL, "_blank")?.focus()
              }}

             <button class={"p-4 font-semibold"} onclick={() => {
                console.log("clicked")
                window.open(FORM_URL, "_blank")?.focus()
              }}

nothing appears in console no errors either there's that:

Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

lxsmnsyc•10mo ago

it wouldn't appear because the event listener is supposed to be registered on the client-side through hydration

RevxrsalOP•10mo ago

ahhh i see. what should i do though? make it a separate component then 'use client'?

lxsmnsyc•10mo ago

no, "use client" isn't a thing btw what setup of SSR is this

RevxrsalOP•10mo ago

oh okay. it's just the one bootstrapped by pnpm create solid

lxsmnsyc•10mo ago

I see, does it mention SolidStart anywhere

RevxrsalOP•10mo ago

nope (except in the README)

lxsmnsyc•10mo ago

so it's a Start setup then. hmmm weird that you don't have hydration here

RevxrsalOP•10mo ago

the code above is in the app.tsx file

lxsmnsyc•10mo ago

is there any other thing you have touched?

RevxrsalOP•10mo ago

it was created with the "with-tailwindcss" in the CLI i added the favicons to the entry-server.tsx file but that's it

lxsmnsyc•10mo ago

is it possible for you to produce a repro of this?

RevxrsalOP•10mo ago

yeah certainly @lxsmnsyc 🤖 i wasn't able to reproduce it in the basic template. i noticed that its app.tsx file has a <MetaProvider> tag wrapping the (props) => () thing (in my code it was just a <>) when i added @solidjs/meta and wrapped it with MetaProvider everything worked yeah all buttons click now wrapping it with MetaProvider seemed to fix it

RevxrsalOP•10mo ago

my project was using solid-start 0.5.2, which apparently does not report that. removing MetaProvider from the one with 0.5.4 reports an explicit error

RevxrsalOP•10mo ago

the with-tailwindcss template may need updating haha

Gaming

Programming

weird behavior: a button declared in TSX with onClick does not have onClick in the final html?