[BUG] [1.4.0.1] Deferred import bindings break after await statements.

[trusktr]

Found a funky one. Basically, the following code describes the issue, where the React variable becomes undefined after the await statement:

main()
async function main() {
    import React from 'react'
    import startup from 'awaitbox/meteor/startup'

    console.log(' --- React?', React) // defined. All is fine.
    await startup()
    console.log(' --- React?', React) // undefined! Uh oh!
}

[trusktr]

Here is a reproduction: https://github.com/trusktr/site/tree/meteor-issue-7662

To run:

git clone https://github.com/trusktr/site --branch meteor-issue-7662 --single-branch
cd site/meteor-app
npm install
meteor

[benjamn]

This is a real bug! Thanks for bringing it to my attention.

The best way to solve this would be to turn reify into a Babel plugin so that it can run before babel-plugin-transform-regenerator, so Regenerator won't accidentally confine the imported variables to the switch statement that it generates.

A pretty good solution is just to run the reify compiler before any Babel plugins, so that's what I'll work on now.

[trusktr]

Wanted to note that for a workaround we can simply define the logic in a function before the await statement, then run the function after the await statement, so the above example becomes:

main()
async function main() {
    import React from 'react'
    import startup from 'awaitbox/meteor/startup'

    function logReact() {
        console.log(' --- React?', React) // defined. All is fine.
    }

    await startup()

    logReact() // it works
}

[benjamn]

Yep, there are lots of workarounds. The simplest is to move the import declarations out of the async function. Here's one version of that:

main()
function main() {
    import './silence-react'
    import React from 'react'
    import ReactDOM from 'react-dom'
    import startup from 'awaitbox/meteor/startup'

    return async function () {
        console.log(' --- React?', React) // defined. All is fine.
        await startup()
        console.log(' --- React?', React) // undefined! Uh oh!
    }();
}

[trusktr]

I really like deferred imports. They can solve circular dependency problems very neatly! What is the likelihood it making it into the ES spec? I'll bring it up in esdiscuss to help raise awareness.

[benjamn]

I'd hold off on bringing it up on esdiscuss, since I presented it at the last TC39 meeting, and I'm still working on a revised proposal with some other members.

[trusktr]

(I added repro steps to #7646. Are you able to reproduce?)