capri-js / capri

Build static sites with interactive islands
https://capri.build
MIT License
200 stars 5 forks source link

hmr fails with unamed components #47

Closed chaoky closed 1 year ago

chaoky commented 1 year ago

using

export default function() {
  useStatus(404);
  return (
    <main>
      <h1>404 - Not found.</h1>
    </main>
  );
}

instead of

export default function NotFound() {
  useStatus(404);
  return (
    <main>
      <h1>404 - Not found.</h1>
    </main>
  );
}

makes capri display a blank screen when changes are made to source code

chaoky commented 1 year ago

this is also the reason behind the blank screen that appears after hitting reload on the browser in the react example

https://github.com/capri-js/capri/blob/main/examples/react/src/main.tsx should be patched to something like this until this issue is resolved

import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

import { PreviewBanner } from "./Preview.jsx";
import { routes } from "./routes.jsx";

const router = createBrowserRouter(routes, {
  basename: import.meta.env.BASE_URL,
});

function App() {
  return (
    <StrictMode>
      <PreviewBanner />
      <RouterProvider router={router} />
    </StrictMode>
  );
}

ReactDOM.createRoot(document.getElementById("app")!).render(<App />);