react-router: [Bug]: Cloudflare Pages - Outlet not working.

What version of React Router are you using?

^6.22.3

Steps to Reproduce

I am using an normal createReactRouter, and since today it just doesnt work after i run the build command.

Expected Behavior

Using Routes, it just shows the 404 Error not found page, anything else is just a blank page, I changed nothing on the Routing part or whatever, i just redeployed to cloudflare pages

Actual Behavior

Just blank page.

Main.ts

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Routes />
  </React.StrictMode>,
)

Routes.tsx


export const ANDRoutes = [
    {
        path: '/',
        index: true,
        element: <Home />
    },
    {
        path: "/upload",
        element: <Home />
    },
    {
        path: '*',
        element: <NotFound />
    }
]

const router = createBrowserRouter([
    {
        path: '/',
        element: <App />,
        children: ANDRoutes,
        errorElement: <ErrorPage />
    }
])

export function Routes() {

    return (
        <>
            <RouterProvider router={router} />
        </>
    )
}

App.tsx

function App() {
  
  return (
    <Box>
      <Outlet/>
    </Box>
  )
}

export default App

And home.tsx and the others returns valid Elements, If i remove the Outlet and just use static my <Home/> it displays that, if i use use <Outlet/> nothing appears just a blank white page, no errors nothing

About this issue

  • Original URL
  • State: closed
  • Created 2 months ago
  • Comments: 32 (5 by maintainers)

Commits related to this issue

Most upvoted comments

I’m using Yarn, and a temp fix for that issue is:

package.json:

"resolutions": {
    "rollup": "4.15.0"
}

It seems to be this commit https://github.com/rollup/rollup/pull/5443

When i just use npm run dev, so locally dev build it actually works, but when i run the build command to build the html, js etc it doesnt work anymore.

I’m using Vite5, and a temp fix for that issue is:

If you using npm, add to package.json file:

"overrides": {
    "rollup": "4.15.0"
}

If you using pnpm, add to package.json file:

"pnpm": {
    "overrides": {
        "rollup": "4.15.0"
    }
}

As noted above, this is a bug introduced in rollup@4.16 which was released over the weekend, and vite uses a dependency of rollup@^4.13.0 so it can pick it up on fresh installs. It’s being looked into by the rollup team (https://github.com/rollup/rollup/pull/5443) and a PR is open with a fix (https://github.com/rollup/rollup/pull/5482).

For now, you can install rollup@4.15.0 into your app’s devDependencies or use the overrides field in package.json to pin to rollup@4.15.0 as a workaround.

Change the vite version to 4.4.1 build again and deploy. It should work

Rollup 4.16.2 is out with a fix that might address this. https://github.com/rollup/rollup/pull/5482#issuecomment-2069859661

is a very serious problem🥲

can anyone please suggest me the solution that i am doing wrong ? it happens suddenly i didn’t even changed anything

@amentotech026 It’s not necessarily your code, A recent change to the Rollup 4.16.1 breaks React Router on build. Just do what has been suggested above in your package.json file in the meantime while it gets sorted out.

+1. Actually nested didn’t work for me at all after I built it, only in dev. The fix was un-nesting and passing {children}.

i use the same fix (we broke the production without image backup) took us all day

+1. Actually nested didn’t work for me at all after I built it, only in dev. The fix was un-nesting and passing {children}.