JavaScript import statements running code

Question

I'm trying to diagnose a problem thats recently arisen for us, after upgrading our suppported browser (~40 -> ~60)

We have this effective code in an external (now unsupported) library, that sits in an iffe:

(function(window, undefined){
    # external library
    if(!window.terribleIdea){
        window.terribleIdea = {}
    }
    <some code>
    if(!window.terribleIdea.config.url){
        window.terribleIdea.config.url = 'the wrong url'
    }

    localStorage.set('somethingImportant', getStuff(window.terribleIdea.config.url))
})( window );

Now we did have a bootstap type file that looked like this:

# appBootstrapper.js
import applyConfig from './app/configApplier';
import ALL_ANGULAR_MODULES from './app'; # contains angular.module set up for 
                                         # app and every dependency

fetchConfig()
    .then(applyConfig)
    .then () => angular.bootstrap(document, [ALL_ANGULAR_MODULES])
    .catch( error => {
        alert(`It borked:  ${error.message}`)
    });

Amongst other things applyConfig does:

window.terribleIdea = {
    config: {
        url: 'not terrible'
    }
}

What now happens, is that the import statement of ALL_ANGULAR_MODULES ends up running the code in the external library, and setting local storage. What we think used to happen is that it was only called on angular.bootstrap running.

Now what I need to find out is, has the functionality of the import statement changed in a later version of chrome, or has it always been running this code and gone unnoticed?

All I can find is references to Dynamic Imports, and the order of scripts running, in <script></script> tags.

Hello, aren't you using any bundler such as webpack/browserify/rollup ? It seems indeed that the execution order changed but I doubt it is due to chrome, more likely in the way the third party lib initialized itself hard to tell without access to its sources/history. — adz5A
– adz5A, Commented Sep 17, 2018 at 11:14
@adz5A we're using webpack as our bundler. The third party library last changed ~2.5 years ago. — AncientSwordRage
– AncientSwordRage, Commented Sep 17, 2018 at 11:22
How does the ALL_ANGULAR_MODULES "ends up" running the code ? does it imports it explicitly ? If not is this library loaded in webpack ? with its own entry: { thirdPartyLib: "./ } or via something like entry: [ "./pathToThirdParty", "app.js" ] . Looking to see if a changed config might have resulted in unexpected changes in execution order. — adz5A
– adz5A, Commented Sep 17, 2018 at 11:54
@adz5A one of the modules in ALL_ANGULAR_MODULES has `import 'third-party-package' somewhere down the chain of imports. The library is part of our dependencies, and doesn't have it's own loader. — AncientSwordRage
– AncientSwordRage, Commented Sep 17, 2018 at 12:02
Kind of hard to debug without getting my hands on a working demo. I exposed in the comments me best guesses. I'll try to think to anything else. As a conclusion I would look into: configuration changes at the webpack level, Webpack behaviour change in the way it bundles dependencies and finally changes in the import order mechanism at the angular level. Sorry if it is not of much help. — adz5A
– adz5A, Commented Sep 17, 2018 at 13:04

adz5A · Accepted Answer · 2018-09-17 16:12:40Z

1

It is hard to debug without access to the project (see discussion in comments above). Here are some possibilities worth exploring while encountering such issues. It is of course possible that it was like this all along.

Change in the bundler configuration. Webpack accepts entries as arrays, and order matters in them.
Change in the way the bundler/dependency manager reacts to dynamic imports
Change in the way your application loads its dependency during the its bootstrap phase. It is not (imo) angular specific, as many app use some kind of "componentization" which translates in files executed in a different order they are imported (as they may only export constructors or whatnot).

answered Sep 17, 2018 at 16:12

adz5A

2,03211 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript import statements running code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related