Managing nested System.import calls in JavaScript

Other Questions JavaScript
1

I’m finding it difficult to manage multiple module imports using System.import in JavaScript. I have to import two separate modules and utilize their respective methods.

Currently, my code looks like this:

System.import("frm/core").then(function(core) {
    core.companionScript("something", function ($element, options) {
        "use strict";
        // logic here
    });
});

Now, I want to integrate another import for System.import("frm/mod/messages"), which includes a method named addMessages. My attempt was to structure the imports as follows:

System.import("frm/core").then(function(core) {
    System.import("frm/mod/messages").then(function() {
        core.companionScript("something", function ($element, options) {
            "use strict";
            // more logic here
        });
    });
});

However, when I try to invoke addMessages later in my existing code, it fails with an error stating that the method is not available:

function doSomething(password){
    // some logic
    if(condition) {
        addMessages("p1", "p2", {errors : ["errKey"]});
    }
}

What is the proper way to import multiple modules and call their functions correctly?

2

The issue you’re encountering stems from scope visibility. When you import the messages module inside the nested then block, the addMessages function isn’t accessible in your global doSomething function because it exists only within that promise chain scope. I’ve dealt with similar module loading challenges before. The cleanest approach is to use Promise.all to load both modules simultaneously and then assign the methods you need to variables that have broader scope accessibility. Something like this works well: javascript let addMessages; Promise.all([ System.import("frm/core"), System.import("frm/mod/messages") ]).then(function([core, messages]) { addMessages = messages.addMessages; core.companionScript("something", function ($element, options) { "use strict"; // your logic here }); }); This pattern ensures both modules load concurrently rather than sequentially, and you can access addMessages from any function defined after the promise resolves. I’ve found this approach much more maintainable than deeply nested imports.

3

looks like you’re not storing the messages module reference properly. i had this exact problem last month. try declaring a variable outside the promise scope like let msgModule; then assign it inside your import callback msgModule = messages;. then in doSomething use msgModule.addMessages() instead of just addMessages(). works every time for me.

4

Your scoping problem occurs because the messages module is only available within the nested promise callback. I ran into this exact scenario when working with legacy module systems. Instead of nesting imports, consider storing the imported module in a variable accessible to your doSomething function. Here’s what worked for me: javascript let messagesModule; System.import("frm/core").then(function(core) { return System.import("frm/mod/messages").then(function(messages) { messagesModule = messages; core.companionScript("something", function ($element, options) { "use strict"; // logic here }); }); }); function doSomething(password){ if(condition) { messagesModule.addMessages("p1", "p2", {errors : ["errKey"]}); } } The key difference is chaining the promises with return statements and storing the messages module reference outside the promise scope. This maintains the sequential loading you originally intended while making the module methods accessible throughout your application. Make sure doSomething only executes after the modules have loaded completely.