Menu
I am recently learning to use system.js to import modules which compiled by Typescript. The modules were previously compiled for require.js, and works fine.
However, when merging to system.js, the modules cannot be imported when applying system-production.js. The console says
Uncaught (in promise) Error: Module instantiation did not call an anonymous or correctly named System.register.
Instantiating https://www.star.com/libs/js/klondike.js
Loading ./libs/js/klondike.js
at register-loader.js:203
t @ common.js:83
(anonymous) @ loader-polyfill.js:70
I don't quite understand what causes the error message. And when I applying system.src.js, there won't be error message, but I cannot use functions in the imported modules. Any call will return undefined. So did I operate in a wrong way?
Below is the source code.
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<!-- sys import -->
<script src="libs/js/system-production.js"></script>
<!--<script src="libs/js/system.src.js"></script>-->
<script>
System.import("./libs/js/klondike.js");
</script>
</html>
tsconfig.json
{
"compilerOptions": {
"module": "System",
"outFile": "../../js/klondike.js",
"target": "es5",
"sourceMap": true,
"removeComments": true
},
"include": [
"./*"
]
}
Main module: CardMoves.ts
//sys import
import * as DBJSN from "./debugJson";
import PokerCard from "./Cards";
let suits: string[] = ["spade", "heart", "club", "diamond"];
let cards: string[] = [, "A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
//sys export
export function createDeck() {
let playCards: PokerCard[] = new Array(DBJSN.settings.decks*52);
console.log(playCards);
for (let i=0; i<playCards.length; i++) {
playCards[i] = new PokerCard();
playCards[i].suit = suits[Math.floor(i % 52 / 13)];
playCards[i].card = i % 52 % 13 + 1;
}
return playCards;
}
Dependency1: Cards.ts
//sys export
export default class PokerCard {
private _suit: string;
private _card: number;
constructor() {}
//Suit getter and setter
get suit(): string {
return this._suit;
}
set suit(newSuit: string) {
try {
if (this._suit === undefined)
this._suit = newSuit;
else
throw "Suit value has been set.";
}
catch(e) {
console.log(e);
}
}
//Card getter and setter
get card(): number {
return this._card;
}
set card(newCard: number) {
try {
if (this._card === undefined)
this._card = newCard;
else
throw "Card value has been set.";
}
catch(e) {
console.log(e);
}
}
}
Dependency2: debugJson.ts
//sys export
export let settings = {
decks: 1,
cardsPerClick: 1,
timer: true
};
355
I had the same issue. The problem was I tried to use bundle as regular module. According to documentation bundle should have several System.register calls. Then you have to add this bundle via script tag as regular js file. And after that call your start point module (createDeck in your case I assume).
Please follow https://github.com/systemjs/systemjs/blob/master/docs/production-workflows.md for more information.
Hope this helps!
90
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
