Are there issues with using Wouter in Astro with SSR mode enabled?

[denno020]

I've got Astro set up to render my App component using client:load, and I'm using the Router component to wrap the export of the App component in the App file, but Astro still complains that location is not defined..

---
// index.astro
import Layout from '../layouts/Layout.astro';
import App from '../App';
---
<Layout>
  <App client:load />
</Layout>

// App.tsx
import { Router } from 'wouter';

const App = () => {/* Component code */}

const withRouter = (WrappedComponent: typeof App) => {
  return (props: AppProps) => (
    <Router ssrPath="">
      <WrappedComponent {...props} />
    </Router>
  );
};

export default withRouter(App);

Without/without witeRouter wrapping App, the error is always

which indicates to me that the Router itself isn't helping?

[molefrog]

If you're getting this error it probably means that you don't have SSR set up. I think it's because your ssrPath is an empty string (try "/" instead). When it's a falsy, we assume that SSR is not active, so that's why Astro is trying to use client location on the server.

And if you don't need it to be rendered on the server at all, you can use client:only directive and remove ssrPath.

[molefrog]

I've put together a quick example project
https://stackblitz.com/edit/withastro-astro-dadv5h?file=src%2Fcomponents%2FReactComponent.tsx

[denno020]

Thank you for responding and for the demonstration. That was my very next step to debug what was going on, so you've saved me a step!

I did actually have ssrPath set to / for the longest time, but the code that I copied was the attempt at having nothing there!

Great to know that it does work, not great to know that it means I've got some buggy code of my own somewhere 😬