Asynced components child imports not included in chunk

[olafur164]

Do you want to request a feature or report a bug? I think this might be a bug either in webpack 4 or react-habitat. Need to look a bit further into this.

What is the current behavior?

Async components are being added into seperated chunks but a child component of a chunk is not inside that chunk instead it is in the main.js file

Example:

I've a megamenu. in the constructor we are do containerBuilder.registerAsync(() => System.import('./containers/MegaMenuContainer')).as('RMegaMenu')

then inside that component we do import { MegaMenu } from '@components-library';

What is the expected behavior? All child imports of a dynamically imported file ends up in async chunk, if it is not used anywhere else.

webpack v4.28.4 react-habitat v1.0.1

[jenssogaard]

Hæ @olafur164. Working on a project using async components as well and I do not experience the problem you describe. Can you post your main.js and webpack.config.js

[olafur164]

Hæ @jenssogaard after more debugging i believe it has something to do with either because we're using npm-link to components library or it might be because the megamenu component for an example is using importing code used in other components (Helpers and etc...) At least i made a small component in the same folder where my megamenucontainer.tsx file is that had a react component only rendering

test

and that worked.

our structure is like this:

Components-library (npm link) -src -components -Megamenu webparts -src -containers MegamenuContainer.tsx (Import Megamenu from components-library) -components componentcontainer.tsx (React habitat init)

I'll come back to you with the webpack config etc..

[olafur164]

This issue was unrelated to react-habitat, but rather it was because of how the project was structured