Dynamic function can't import sub components.

[dohooo]

Describe the feature you'd like to request

Hi, there. Thanks for this amazing library and the efforts of the contributors. 💪

I can't render sub components by dynamic import.

When I have a component like this

const Tabs=()=><div/>
const Tab=()=><div/>
Tabs.Tab = Tab
export default Tabs.

Usage

...
const Tabs = dynamic(import('...')));
render(){
    return <Tabs>
        <Tabs.Tab></Tabs.Tab>
    </Tabs>
}
...

This will trigger an error, Because Tabs.Tab is undefined.

The relevant code of dynamic library

// next.js/packages/next/shared/lib/loadable.js (lines:144)
...
return React.createElement(resolve(state.loaded), props)
...

It looks like the mount property on the object has been removed in this step. So, I wonder to have an api that keep properties alive.

I have seen some UI component library, according to the normal dynamic writing method, this problem still occurs, which is too vague for most people, there are some black boxes in this step, I can provide a PR if the scheme feels good, looking forward to reply.

Describe the solution you'd like

I think it could be have an API that handles state.loaded data, and processing component before returning it.

e.g.

...
const Tabs = dynamic(import('...'),{process:(loaded,components)=>{
    components.Tab = loaded.Tab; // I know the reactElement obj is immutable, Is there any other way to do it ?
    return components
}}));
...

Describe alternatives you've considered

const Tabs = dynamic(import('....'));
Tabs.Tab = dynamic(import('....').then(r=>r.default.Tab));

[howells]

@dohooo did you work out how to handle this? I've run into the same issue

[therecluse26]

I'm running into this as well with Mantine

[alckordev]

Is there no solution for this?