Importing via import/export "pass-through" causes randomly undefined variables (TypeScript)

[ffxsam]

Version

3.0.0

Reproduction link

https://github.com/ffxsam/repro-undefined-import

Node and OS info

yarn 1.9.4, Ubuntu 18.04

Steps to reproduce

1. Clone and run yarn
2. yarn serve
3. Open Chrome console, note that routes is undefined

What is expected?

routes should be an array of routes

What is actually happening?

routes is undefined

---

Of note is this line in the code:
https://github.com/ffxsam/repro-undefined-import/blob/master/src/components/LoginForm.vue#L100

Edit that and replace routeNames.DASHBOARD with any arbitrary string, and save. Now you'll see that routes in the console is an array. Also updating the import to the following will fix it:

import { routeNames } from '../router/route-names';

This is very strange and took me hours to track down. It may or may not be a vue-cli issue, but I figured this was a good starting point. Sorry I don't have a more descriptive issue report, but it's so random, I'm not even sure how to describe it.

[haoqunjiang]

So the bug seems related to re-export of variables but I can't reduce it to a minimum reproduction…

[ffxsam]

Neither could I.

[ffxsam]

@yyx990803 @Akryum @LinusBorg Any thoughts? Is this maybe a duplicate?

[haoqunjiang]

Finally figured out…
It's due to a circular dependency here:
https://github.com/ffxsam/repro-undefined-import/blob/a1b19fd90439f95bf218fda5edcff60065897864/src/router/routes/index.ts#L6

[ffxsam]

@sodatea I don't think that's the case. If that's true, then why does this repo console.log the correct value just fine, even though there's a circular import?

https://github.com/ffxsam/repro-no-circular-deps

I think webpack resolves for circular imports. Unless I'm missing something else? Otherwise, I'd appreciate if you re-opened this issue.

[haoqunjiang]

In a further narrowing down of the reproduction, I found another reference to routes in TheNavigation component, which is imported in App.vue and got executed during the initial render process. After removing it, everything works quite well.

Though I still don't understand why the reference to routeNames in LoginForm affects the final outcome, I guess it must be something related to the execution order of circular dependencies in ES modules.

[ffxsam]

Still, do you have any idea why the other repo I linked to above works fine, despite having a circular import?

[haoqunjiang]

AFAIK, to support circular dependencies, ES modules are designed to resolve dependency references first, and execute the underlying code path only when needed. That could be the actual cause of this issue.

So as I suppose, it could be because the second repo has an (almost) empty App.vue, which means no code actually gets executed on initial render.

There might be deeper reasons but it surely is out of vue-cli's scope.

[ffxsam]

That's the tough thing here, determining where the issue actually lies (webpack? TypeScript?). I don't think there's an immediate solution for this, so I'll have to remain conscious of imports/re-exports.

Thanks for your help!

PS: Made the repo private, there was a bit more code in there that was I comfortable with. Not that there was anything terribly proprietary, but still. 😄