Dynamically imported module in react won't react to Mobx observable

[ghost]

I load a react component dynamically (via webpack's import('module').then) into my bundle. The problem is that the component won't react to Mobx observable's changes. If i import the module the normal way everything works as intended.

Looking at Mobx dev tools i can see that when the component is statically imported, when the observable changes i see that the component re-renders:

Updated ‘[email protected]’: ([email protected]) (was ([email protected])) Scheduled async reaction ‘Reviews#0.render()’ Reaction ‘$Reviews#0.render()’

In contrary when i use code splitting i don't see any render invoked:

Updated ‘[email protected]’: ([email protected]) (was ([email protected]))

Bellow is my code with test data

`class ReviewsStore { // My store
@observable profile = {};

@action
getProfile() {
    $.ajax({
            url
        })
        .then(action((data) => {
            this.profile = {
                user: 'John Doe',
                userid: 123,
                followers: 25,
                reviewsCount: 22,
                reviews: [{
                        body: 'Lorem ipsum ',
                        date: '20/12/2016',
                        rating: 4.5,
                    },
                    {
                        body: 'Lorem ipsum dolor sit',
                        date: '23/12/2016',
                        rating: 4.2,
                    },
                ],
            };

        }));
}

}

@observer class Reviews extends Component { // My View
constructor() {
super();
this.getProfile = this.getProfile.bind(this);
this.state = {
asyncModule: null,
};
}

getProfile(id) {
    this.props.store.getProfile(id)
    import ('../components/reviews/user-profile')
    .then(({
        default: Profile
    }) => {
        this.setState({
            asyncModule: < Profile user = {
                this.props.store.profile
            }
            />,
        });
    });
}

render() {
    return ( <
        div > {
            this.state.asyncModule
        } <
        /div>
    );
}

}`

I'd be grateful for some help, i've been struggling with this issue for more than a week. Thank you in advance!

[suprise]

@sgus May be you can try this:

render() {
    console.log(this.props.store. profile)   //add this
    return ( <
        div > {
            this.state.asyncModule
        } <
        /div>
    );
}

because may be MobX only collect dependences which appearance in the render() method.

[ghost]

@suprise Thank you for replying,
I added the console log in my wrapper component and one in my asyncedModule,

At first i see it logs "Object {$mobx: ObservableObjectAdministration}" and the same in my asyncedModule and then the wrapper component rerenders (because the action to get the data is asynchronous) and console logs the correct object, but i don't see any render from the asyncedModule.

I hope i gave you an idea.

[mweststrate]

@sgus are you sure mobx is not bundled into your splitted bundle as well? Like react, mobx should be unique to be able to operate!

[mweststrate]

Othwerise, please provide a minimal reproduct repo

[ghost]

Hi @mweststrate thank you very much for taking the time again.
i made a simplified version here https://gitlab.com/Sgus/mobx-code-splitting-demo

Basically, i have a store with an observable called id, with initial value 3, when you press the button (there is only one button) i load the asynced module which the id, and i update the observable after 3 seconds.
The normally loaded module updates but the async module won't.

I hope i make sense!
Thank you in advance!

[mweststrate]

Just looked at your example. Your problem does not relate to mobx. The problem is that in App you just render AsyncProduct once, with the store id at that time, and store it in your state. The solution is to not store an element in your state, but the component instead, and render the component, not the element as part of your render(), e.g. render should have something like <this.state.asyncModule id={this.props.store.id} />