Routing fails after building a React app with vite

[george-i]

In development mode (after running npm start), all routes are performing as expected.
After running npm run build && npm run preview, in preview or production mode, the routing fails without any error or warning.

I'm sharing a few code snippets which should be useful to determine the root cause.

To simplify, I tested this:

import {Outlet, useRoutes} from "react-router-dom";


const HomeLayout = () => {
    return (
        <div>
            <h1>Home</h1>
            <Outlet/>
        </div>
    );
};

const SubLayout = () => {
    return (
        <div>
            <h1>Sub</h1>
            <Outlet/>
        </div>
    );
};

export default function ThemeRoutes() {

    return useRoutes([
        { path: '/', element: <HomeLayout /> },
        { path: 'sub', element: <SubLayout /> }
    ]);

}

This code works fine in both dev and after build.
However, after I add children to any of the routes, will work fine only in dev mode, while after build an empty page is displayed.
Furthermore, after build, the parent element is not displayed.

And this is the vite.config.mts code:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
    // depending on your application, base can also be "/"
    base: '/',
    plugins: [react(), viteTsconfigPaths()],
    server: {
        // this ensures that the browser opens upon server start
        open: true,
        // this sets a default port to 3000
        port: 3000,
    }
});

Any suggestions to what could cause this behavior?

[ongcaoboi]

I also encountered a similar issue. When adding any child route, the development environment still works fine, but the production environment always returns a blank page.

[ongcaoboi]

In package.json, I overrode the rollup version to 4.16.2. After that, the router worked well in both the development and production environments.

  "overrides": {
    "rollup": "4.16.2"
  }

[george-i]

Indeed it works.
I had a few hints about rollup, but didn't followed them.