Dependencies of React.lazy component not being split into separate chunks

Question

I'm trying to use React.lazy() to reduce the size of our main webpack bundle. The component that I'm lazy loading is successfully being split into its own js chunk that is downloaded on demand when needed.

However, the dependencies of the lazy loaded component are still being included in the main js bundle. Is this expected behavior? How can I properly split off dependencies of the lazy loaded component into their own chunks or be included with the lazy loaded component's chunk?

// This code is part of our main bundle
const LazySection = React.lazy(() => import('./BaseSection'));
const Section = (
    <Suspense>
        <LazySection />
    </Suspense>
);
​
export default Section;
​
​
// This code is split into its own chunk
import { OtherComponent } from './OtherComponent ';
import { NonReactStuff } from './NonReactStuff'; 
// NonReactStuff is included in main bundle. How can I split into a separate lazy loaded chunk 
// or part of the BaseSection chunk?
​
const BaseSection = () => (
    <OtherComponent  item={ NonReactStuff } />
);

export default BaseSection;

Tuberose