How to use dynamic import (chunk splitting) with loader functions?

[bold parrot]

I am creating a react-router (v6.4) project with esbuild and have added code splitting in for components, the loaders and actions are inside the same file for better context (same as remix).

However to code split of course I need to do dynamic importing which works fine for the component, but not the loader as this function has to be returned immediately but a dynamic import returns a promise.

[fleet cypress]

You need to set a function that’s not dynamically imported and inside import the actual loader

[bold parrot]

what if i want to pass global context from above the router, how would that work?

const Dashboard = React.lazy(() => import('./pages/dashboard'));
const dashboardLoader = import('./pages/dashboard').then(({ loader }) => loader);

const router = (context: any) => {

    return createBrowserRouter(
        createRoutesFromElements(
            <Route path="/">
                <Route path="/app" element={<Layout />}>
                    <Route
                        path="/app/dashboard"
                        element={<Dashboard />}
                                                // I need to pass context to the loader function from the router context arg
                        loader={dashboardLoader}
                    />
                </Route>
            </Route>
        )
    );

[bold parrot]

A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

loader={(props) => deploymentLoader({ context, ...props })}
const deploymentLoader = (arg: any) => import('./pages/deployment').then(({ loader }) => loader(arg));