reactjs - Webpack kode-splitting når man importerer dynamisk og statisk blandet

Jeg har et problem med kodesplitting i webpack 5. Jeg har et monorepo med yarn workspaces. Pakke foo inneholder en veldig stor komponent (Foo). Den inneholder også noen små statiske ting (theme), som ikke bør lastes asynkront. Siden jeg ønsker å ha en liten hovedchunk, bør denne kun inneholde den lille theme og ingenting annet. Foo bør senere importeres «lazy».

Det webpack faktisk gjør er å importere alle tingene i hoveddelen, i øyeblikket inneholder index.tsx-filen theme-importen, og den dynamiske importen blir på en måte ignorert. Det er to deler, men den andre er bare tom.

foo.ts

export { Foo as default } from "foo";

index.tsx

import React, { Suspense} from "react";
import { theme } from "foo";
export const App = () => {
    const Foo = React.lazy(() => import("./foo"));
    return <>
        {theme}
        <Suspense fallback={<div>Loading</div>}>
            <Foo />
        </Suspense>
    </>;
};

Noen ideer om hvordan man kan løse dette?