Systemjs: Strange behavior when module has circular references

Created on 12 Apr 2016  路  5Comments  路  Source: systemjs/systemjs

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:

files.zip

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?

Most helpful comment

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:

  1. Classes have a TDZ, which depends on execution order
  2. Execution order is determined by import order

All 5 comments

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:

  1. Classes have a TDZ, which depends on execution order
  2. Execution order is determined by import order

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...

Was this page helpful?
0 / 5 - 0 ratings