Delay import in SystemJS

2
votes

I'm just starting to use SystemJS/JSPM with React. In my application, I use some 3rd party libraries that are not in any of common JS module format like AMD, CJS, etc, so when I install those libraries, they are installed as global modules, .e.g here is the js file generated by JSPM for one library:

module.exports = require("npm:[email protected]/dist/js/app.js");

This library has some initialization code run when imported so it expects the DOM elements are ready before that. If I import and use it together with React like this:

import adminlte from "adminlte";

export default class Root extends React.Component {
    render () {
        return (
            <div className="wrapper">
                <MainHeader />
                <MainSidebar />
                <MainContent />
                <MainFooter />
                <ControlSidebar />
            </div>
        );
    }
}

It's not working. I guess because the library is imported and its initialization code is run before React renders the DOM into browser. So Is there any way to delay the import of 3rd party library until DOM is rendered by React?

I look into some life cycle event in React like componentDidMount, etc but still not sure how to do this properly

1
javascriptreactjssystemjsjspm
import statements unfortunately cannot be loaded conditionally or on-the-fly like require() statements - lux

1 Answers

1
votes

Finally work around by importing the third party library using System.import() after the main application is already loaded:

<script type="text/javascript">
    System.import("js/app/main.js")
        .then(() => {
            System.import("adminlte");
        });    
</script>

It might not be the best way to solve this, so if anyone else has a better way, please suggest it