typescript re-export modules with SystemJS not work

Question

I Try to re-export modules according to typescriptlang web site - modules I use SystemJS as module loader :

app.ts

import * as s from "./AllValidators";

// Some samples to try
let strings = ["Hello", "98052", "101"];

// Validators to use
let validators: { [s: string]:s.StringValidator; } = {};
validators["ZIP code"] = new  s.ZipCodeValidator();
validators["Letters only"] = new s.LettersOnlyValidator();

// Show whether each string passed each validator
strings.forEach(s => {
for (let name in validators) {
    console.log(`"${s}" - ${validators[name].isAcceptable(s) ? "matches" :  "does not match"} ${name}`);
}
});

AllValidators.ts

 export * from "./Validation"; 
 export * from "./LettersOnlyValidator"; 
 export * from "./ZipCodeValidator";

LettersOnlyValidator.ts

import { StringValidator } from "./Validation";

const lettersRegexp = /^[A-Za-z]+$/;

 export class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
    return lettersRegexp.test(s);
  }
}

Validation.ts

export interface StringValidator {
  isAcceptable(s: string): boolean;
}

ZipCodeValidator.ts

  import { StringValidator } from "./Validation";

   const numberRegexp = /^[0-9]+$/;

    export class ZipCodeValidator implements StringValidator {
        isAcceptable(s: string) {
            return s.length === 5 && numberRegexp.test(s);
        }

}

index.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <script src="system.js"></script>
    <script src="typescript.js"></script>
    <script>
        System.config({
            transpiler: 'typescript',
            packages: {
                src: {
                    defaultExtension: 'ts'
                }
            }
        });
        System
          .import('src/app')
          .then(null, console.error.bind(console));
    </script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content"></div>
</body>
</html>

When i run in the browser(Chrome) i see error in the console log:

Error: (SystemJS) Unexpected token export(…)

https://github.com/shorimiz/TypeScript/tree/master/TypeScript_Examples_In_VS2015/011_Module_Wrap_Other_Modules

artem · Accepted Answer · 2016-09-28 20:38:38Z

1

The code in Validation.ts is not properly detected by SystemJS as using es6 features, so it skips compilation and tries to load that file as it is, causing the error.

The workaround is to declare the format explicitly - you need to add meta to src package configuration:

            src: {
                defaultExtension: 'ts',
                meta: {
                    '*.ts': {format: 'esm'}
                }
            }

The format is esm because SystemJS does not have separate format for typescript - it's the same es6 module, the only difference is that it has to be compiled by typescript compiler (all supported module formats are documented here)

Another, more ugly workaround is to add some dummy code at the beginning of Validation.ts so it would be auto-detected properly:

 export class __SomeUnusedName {}

is enough.

answered Sep 28, 2016 at 20:38

artem

52.2k10 gold badges86 silver badges85 bronze badges

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

Collectives™ on Stack Overflow

typescript re-export modules with SystemJS not work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related