usePage must be used within the Inertia component

[ToliaGuy]

Hello, I have spent half a day trying to fix this issue, but can't make it work, when loading page, the page is blank and console show this

Uncaught Error: usePage must be used within the Inertia component
    at q (index.esm.js:1:2029)
    at AppLayout (Index.tsx:109:19)
    at renderWithHooks (react-dom-client.production.js:3502:21)
    at updateFunctionComponent (react-dom-client.production.js:6239:15)
    at beginWork (react-dom-client.production.js:7243:14)
    at performUnitOfWork (react-dom-client.production.js:10855:14)
    at workLoopSync (react-dom-client.production.js:10736:37)
    at renderRootSync (react-dom-client.production.js:10717:7)
    at performWorkOnRoot (react-dom-client.production.js:10322:40)
    at performWorkOnRootViaSchedulerTask (react-dom-client.production.js:11626:3)

Why can't I use the usePage inside component?

Here is my code:

import { useState } from "react"
import { Link, usePage } from "@inertiajs/react"

function AppLayout({children}: {children: React.ReactNode}) {
  const { url } = usePage()

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
    {/* Header */}
    <Header url={url} />

    {/* Main content */}
    <main>
      {children}
    </main>

    {/* Footer */}
    <Footer />
    
  </div>
  )
}

function Layout(page: React.ReactNode) {
  return <AppLayout>{page}</AppLayout>
}

export default function Index() {
  return (
    <div className="container mx-auto py-8 px-4">
      <h1 className="text-3xl font-bold text-blue-600 mb-4">Test homepage</h1>
    </div>
  )
}


Index.layout = (page: React.ReactNode) => Layout(page)

Any help would be appreciated ❤️

I am using React 19 and these inertia packages

"@inertiajs/inertia": "^0.11.1",
 "@inertiajs/progress": "^0.2.7",
 "@inertiajs/react": "^2.0.0",

[ToliaGuy]

After giving it another 10 hours of my life, I finally found an issue.

The issue was that I was using ManifestStaticFilesStorage which was manifesting already manifested files (moving from templates to React) but not perfectly, so the browser ended up loading two versions of a file Index.sakxkg.js and Index.sakxkg.slaakxg.js so basically two version of react would run and give random errors.