Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: <Outlet/> not working in build production with Vite. #11517

Closed
vladimir-theunit opened this issue May 1, 2024 · 4 comments
Closed

[Bug]: <Outlet/> not working in build production with Vite. #11517

vladimir-theunit opened this issue May 1, 2024 · 4 comments
Labels

Comments

@vladimir-theunit
Copy link

vladimir-theunit commented May 1, 2024

What version of React Router are you using?

^6.23

Steps to Reproduce

I changed version to previous one ^6.21.3 and all works like needed. So inside my component is But I don't see my home page. After decreasing version of react router all works like needed.

Expected Behavior

Should render nested Routes.

Actual Behavior

Outlet not working, so I don't see nested Routes

@brophdawg11
Copy link
Contributor

Could you provide a minimal reproduction of the issue?

@vladimir-theunit
Copy link
Author

vladimir-theunit commented May 2, 2024

Could you provide a minimal reproduction of the issue?

Routing.tsx, all this code is inside
`
import { FC, lazy } from "react";
import { Navigate, Route, Routes, RouteProps } from "react-router-dom";
import { LazyPage, PrivateRoute } from "@/routes";
import { LoginPage, NotFoundPage } from "@/pages";
import { RoutersEnum } from "@/enums";
import Layout from "@/layouts/Layout";

// Import dynamic pages here
const HomePage = LazyPage(lazy(() => import("@/pages/Home")));
const PromotionsPage = LazyPage(lazy(() => import("@/pages/Promotions")));
const SocialAreaPage = LazyPage(lazy(() => import("@/pages/SocialArea")));
const GamesPage = LazyPage(lazy(() => import("@/pages/Games")));

const routes: RouteProps[] = [
{ path: RoutersEnum.PROMOTIONS, element: },
{ path: RoutersEnum.SOCIAL_AREA, element: },
{ path: RoutersEnum.GAMES, element: },
] as const;

const Routing: FC = () => {
return (

<Route element={} path={RoutersEnum.LOGIN} />
<Route element={} path={RoutersEnum.SIGN_UP} />
<Route path="/" element={}>
<Route
index
element={
<>


</>
}
/>
<Route element={}>
{routes.map((route) => {
return <Route key={route.path} {...route} />;
})}

<Route path="*" element={} />
<Route path="/404" element={} />


);
};

export default Routing;
`

After reaching the home page, I only see the layout without the homepage content, but inside the layout, the PrivateRoute contains the Outlet, so don't worry.

After downgrading the version of react-router-dom, all my routes work as expected, as I mentioned in the previous message. While debugging, I noticed that the Outlet isn't functioning in latest version.

I'm using Vite and React with TypeScript. The router only fails to work when I build for production and preview it.

@mohammad-aljamil
Copy link

solved in #11480 (comment)

@brophdawg11
Copy link
Contributor

Yeah my guess is this is due to the bad rollup version - please ensure vite is using the latest version of rollup and the issue should be resolved (see the comments in #11480 for how to do this). Closing this as a duplicate.

@brophdawg11 brophdawg11 closed this as not planned Won't fix, can't repro, duplicate, stale May 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants