Systemjs: TypeScript-produced SystemJS module yields Uncaught TypeError: registration[1] is not a function

[brianjenkins94]

It's unclear if this is related to TypeScript or SystemJS at the moment but as far as I can tell the bundled code doesn't look like it's doing anything far-fetched.

How the bundle was produced:

tsc --module system --outFile docs/js/sampleThatReproducesTheIssue.js --target ES2015 --watch src/index.ts

Sample that reproduces the issue:

System.register("environment/browser", [], function (exports_1, context_1) {
    "use strict";
    var Browser;
    var __moduleName = context_1 && context_1.id;
    return {
        setters: [],
        execute: function () {
            Browser = class Browser {};
            exports_1("Browser", Browser);
        }
    };
});
System.register("index", ["environment/browser"], function (exports_2, context_2) {
    "use strict";
    var browser_1, term;
    var __moduleName = context_2 && context_2.id;
    return {
        setters: [
            function (browser_1_1) {
                browser_1 = browser_1_1;
            }
        ],
        execute: function () {
            term = new browser_1.Browser();
            console.log("Hello!");
        }
    };
});

Relevant HTML:

<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/2.1.1/system.js"></script>

<!-- Inline Script -->
<script>

    System.import("/js/sampleThatReproducesTheIssue.js");

</script>

Error:

Uncaught (in promise) TypeError: registration[1] is not a function
    at system.js:289

[paulmelnikow]

Hi! AFAICT I ran into the same issue recently when I was working on #1885. In your module, the first argument is the module name. Those are named registrations, and for those to work you need to load extras/named-register.js after system.js.

[brianjenkins94]

Huh. That seems to have resolved the error:

<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/2.1.1/system.js"></script>
+https://raw.githack.com/systemjs/systemjs/master/src/extras/named-register.js

<!-- Inline Script -->
<script>

    System.import("/js/sampleThatReproducesTheIssue.js");

</script>

I also had to make this small change to run it:

System.import("/js/sampleThatReproducesTheIssue.js").then(function() {
    System.import("index");
});

Thanks @paulmelnikow !

Are there plans to document this extra? Or to have it listed in the files available from CDNJS?

[paulmelnikow]

I was looking at https://github.com/rollup/rollup-starter-code-splitting, though in that example the generated modules didn't have names. I'd be willing to help document it, though I'm not sure which part of my rollup config caused the names to be included.

node-resolve? babel?

[brianjenkins94]

I wasn't using rollup, I was just using TypeScript's --module system.

It's very possible that TypeScript is out-of-touch with the SystemJS world. I wonder what version of SystemJS TypeScript last tested exporting to, and maybe if that has anything to do with it.

[brianjenkins94]

Anyway, I'm using rollup now so this is no longer an issue.

And it's reasonably-well documented above for the next poor soul who gets to bang their head against this problem.

Thanks for the help @paulmelnikow !

[mqudsi]

This is because TypeScript targets SystemJS 0.21.x and SystemJS versions 2.x and 3.x have deprecated some features TypeScript relies on from the default build.

[viT-1]

tsc with tsconfig options module: system and outFile in conjuction with SystemJs made possible not to use rollup/webpack/babel/browserify/gulp.
But SystemJS version >2.0 have grains of information about working configuration.
Perhaps this situation is due to popularity of webpack and ES6 modules native support on modern browsers - that`s why is hard to find actual helloworld repo =(

This is my example repo for SystemJS 5.0: https://github.com/viT-1/systemjs-ts-es6

I use gulp-typescript because of better integration VS 2019 (not Code) with gulp than npm scripts.