Page render invalid

[komxvl]

I create three components: import React from 'react'

export default function About() {
    return (
        <div>
            <h1>About 1</h1>
        </div>
    )
}

export default function Contact() {
    return (
        <div>
            <h1>Contact 1</h1>
        </div>
    )
}

export default function Home() {
    return (
        <div>
            <h1>Home</h1>
        </div>
    )
}

My App is:

function App() {
  return (
    <div className="App">
        <Routes>
          <Route exact path="about" element={<About />} />
          <Route exact path="contact" element={<Contact />} />
          <Route exact path="home" element={<Home />} />
        </Routes>
    </div>
  );
}

My index.js next:

const isMarkupPresent = document.getElementById("root");

if (!isMarkupPresent.hasChildNodes()) {
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
        <React.StrictMode>
            <BrowserRouter>
            <App />
            </BrowserRouter>
        </React.StrictMode>
    );
} else {
    const container = document.getElementById("root");
    ReactDOM.hydrateRoot(container, <BrowserRouter><App /></BrowserRouter>)
}

My .rsp.jsom:

{
  "port": 3001,
  "buildDirectory": "./build",
  "routes": [
    "/",
    "/about",
    "/home",
    "/contact"
  ]
}

I'm using

"react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.3",

I run next:

npm run build
npm run postbuild
serve -s build

After that when I visit /about and inspect source code I get empty root

, but on UI i see About 1 text. Where I lost ??

[aayusharyan]

@komxvl I understand this is a bit late, but for future readers. This is because the puppeeter is getting closed before the page is getting rendered. Try adjusting the waitUntil option in gotoOptions.