Astro's navigate() function

[thejackshelton]

We get an error from vite when trying to use the navigate function from "astro:transitions/client"

[vite]: Rollup failed to resolve import "astro:transitions/client" from "/home/jackshelton/dev/playground/qwik-astro-transitions/src/s_yca4lyuotcq.js".

This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

s_yca4lyuotcq.js is a symbol in Qwik. A lazy-loadable piece created whenever there is a $ sign used. It fails to resolve the import from vite.

Which my guess is because there is some piece of logic on the astro side that depends on a client directive being present. What would we do here for a framework that doesn't need hydration?

I guess we can check if it has a client directive and if it doesn't just pass it along?

[thejackshelton]

For those of you that have come across this issue, a community member came up with a clever workaround

import { $, component$, useSignal } from "@builder.io/qwik";

const NavigateButton = component$(({ path }: { path: string }) => {
  const linkRef = useSignal<HTMLAnchorElement>();

  const handleNavigate = $(() => {
    console.log('caralho', linkRef.value)
    if (linkRef.value) {
       linkRef.value.setAttribute("href", path)
       linkRef.value.click()
    }
  });

  return (
    <>
      <button onClick$={handleNavigate}>Navigate to {path}</button>
      <a href={path} ref={linkRef} style={{ display: "none" }}>
        {path}
      </a>
    </>
  );
});

export default NavigateButton;