We just migrated our TypeScript project to ES6 modules and started using SystemJS as module loader. We found an issue with System.import when modules have circular references. I attached a minimal example that demonstrates the problem:
To see this issue you can extract attached archive into web server root and open 'test.html'. Then if you click 'Import' you will see that System.import will fail 4 times with 'Can not read property 'prototype' of undefined' and then succeed. Is this System.import behavior implemented by design or this is an issue?
I have the same issue. Have you found any solutions?
Yes, circular references result in exports being undefined as execution in ES modules is ordered.
Now, how can we solve the issue I described?... Main GitHub SystemJS page says "Loads ES6 modules compiled into the System.register bundle format for production, maintaining circular references support.". But here you say that circular references are not supported, can you please clarify?...
Circular references are specified to work as they do in the ES6 specification. In the following scenario:
a.js
import {B} from './b.js';
export Class A extends B {
}
b.js
import {A} from './a.js';
export Class B {
}
If I run System.import('a.js') then B will execute first and A will be able to execute properly. If I run System.import('b.js') then A will execute first, and A will throw an error that B is not yet defined. That is:
Ok, thank you very much! I will try to find solution for this issue myself. Still have question: why SystemJs fails 4 times, and 5-th import succeeds, is this expected behavior? So, for my case I will be able to fix issue running System.import 5 times, ignoring exception and then import will be successful. This solution seems to be working, but smells like a dirty hack...
Most helpful comment
Circular references are specified to work as they do in the ES6 specification. In the following scenario:
a.js
b.js
If I run
System.import('a.js')then B will execute first and A will be able to execute properly. If I runSystem.import('b.js')then A will execute first, and A will throw an error that B is not yet defined. That is: