ReferenceError with SystemJS

Question

I'm using SystemJS as a module system to compile my TypeScript files but whenever I load the page in browser (via live-server) I get following error:

ReferenceError: Sensor is not defined
    at (index):17
    at <anonymous>

This is my index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sensor</title>
</head>
<body>

    <input type="text" id="textField"/> 
    <p id="text"></p>

    <script src="node_modules/systemjs/dist/system.js"></script>
    <script>
        SystemJS.import('dist/index.js').then( function() {
            var textField = new Sensor(document.getElementById('textField')).setName('textField');
        }).catch(function(err) { console.log(err); });
    </script>
</body>
</html>

This is my tsconfig.json file:

{
    "compileOnSave": true,
    "compilerOptions": {
        "module": "system",
        "target": "es5",
        "outFile": "dist/index.js"
    },
    "files": [
        "./src/sensor.ts",
        "./src/signal.ts",
        "./src/signal_receiver.ts"
    ]
}

I checked output file and it looks like Sensor is defined:

System.register("sensor", ["signal", "signal_receiver"], function (exports_3, context_3) {
    ...
    exports_3("Sensor", Sensor);

Edit: I checked now and none of the functions were defined when I tried to call them.

Louis · Accepted Answer · 2017-12-01 23:34:21Z

1

I'm seeing two problems with your code. One is that you are using a bundle, but your code ignores that. Second is that you are not getting Sensor class from your module but instead you're getting it from the global space.

In the code generated by tsc, the call for System.register has "sensor" for the first argument, which means that you are dealing with a bundle. This kind of call hardcodes the module name, and the module name here is "sensor". SystemJS bundles can be loaded with a script element so you could just add this after you load SystemJS:

<script src="dist/index.js"></script>

This will load the whole bundle and make all modules in it available for use.

Then the generated code for your module exports the Sensor class as the Sensor field on your module. (That's what the code exports_3("Sensor", Sensor) does.) So you need to get it from the module when you use it. So the code should be:

SystemJS.import('sensor').then(function(sensor) {
  var textField = new sensor.Sensor(document.getElementById('textField')).setName('textField');
}).catch(function(err) { console.log(err); });

In this code, I'm asking SystemJS to load the module named "sensor" which is the same name used by System.register, and I've added sensor to the argument list of the callback passed to .then and refer to the class as sensor.Sensor.

edited Dec 1, 2017 at 23:34

answered Dec 1, 2017 at 23:26

Louis

152k28 gold badges288 silver badges332 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nikola Stojaković Over a year ago

Thanks for detailed explanation Louis; I'm fairly new to whole this thing about modules but now I understand it much better!

Collectives™ on Stack Overflow

ReferenceError with SystemJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related