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
- fix (react-router-dom)!: fixes serious bug in rollup https://github.com/remix-run/react-router/issues/11480 — committed to jefersoneiji/j-flix by jefersoneiji 2 months ago
I’m using Yarn, and a temp fix for that issue is:
package.json:
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:
If you using pnpm, add to package.json file:
As noted above, this is a bug introduced in
rollup@4.16
which was released over the weekend, andvite
uses a dependency ofrollup@^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’sdevDependencies
or use theoverrides
field inpackage.json
to pin torollup@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🥲
@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.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}.
+1