CODEWITHSUNDEEP
angulartypescriptsystemjs
Kenya-West
Kenya-West

Reputation: 404

Why am I getting a warning that I should set my module format to "system"?

My Typescript shows error in console:

TypeScript [Warning] transpiling to CommonJS, consider setting module: "system" in typescriptOptions to transpile directly to System.register format

OK, but I have SystemJS installed and it should work!

package.json: "systemjs": "^0.20.13"

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2017", "dom"],
    "noImplicitAny": true,
    "removeComments": true,
    "sourceMap": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules/*",
    "**/*-aot.ts"
  ]
}

index.html:

<!DOCTYPE html>
<html>
<head>
    <base href="./" />
    <title>test</title>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) {
            console.error(err);
        });
    </script>
</head>
<body>
    <app>Loading...</app>
</body>
</html>

And the monster, SystemJS! IDK how do you manage this spaghetti? See the code here.

So. The question is: why Typescript says:

TypeScript [Warning] transpiling to CommonJS, consider setting module: "system" in typescriptOptions to transpile directly to System.register format

in browser console when I debug web app?

Upvotes: 1

Views: 273

Answers (2)

Louis
Louis

Reputation: 151401

You are getting that warning because you've set SystemJS to do transpilation on the fly of any typescript code loaded through SystemJS, and you've configured the plugin that does the transpiling to produce modules in the commonjs format.

You show a tsconfig.json in your question but that file won't be used by the plugin. What the plugin uses is the following section of your SystemJS configuration, and there you set "module": "commonjs":

typescriptOptions: {
  // Complete copy of compiler options in standard tsconfig.json
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "lib": ["es2015", "dom"],
  "module": "commonjs",
  "moduleResolution": "node",
  "noImplicitAny": true,
  "sourceMap": true,
  "suppressImplicitAnyIndexErrors": true,
  "target": "es5"
},

You can find the code generating the warning in the source code of the plugin used for transpilation here:

if ((options.module != ts.ModuleKind.System) && (options.module != ts.ModuleKind.ES2015)) {
    logger.warn(`transpiling to ${ts.ModuleKind[options.module]}, consider setting module: "system" in typescriptOptions to transpile directly to System.register format`)
}

Note first of all that this is a mere warning. You can go ahead and still have TypeScript emit CommonJS modules. The reason you get the warning is that given that the plugin is for SystemJS, then forcibly you are loading the modules in SystemJS and presumably you should just use SystemJS' native module format instead of producing CommonJS modules. SystemJS can load CommonJS modules but why use that format when you can use the native format? Whereas in general there are reason to get the TypeScript compiler to generate other formats than the native SystemJS format, in this specific context there's no clear reason to do so. That's why you get a warning.

Upvotes: 1

Michael Sondergaard
Michael Sondergaard

Reputation: 1504

Your systemjs.config.js file, I'm assuming, is what's included in your pastebin.

This configures systemjs to transpile your typescript on the fly in the browser, using the embedded configuration in that file.

This is most likely not what you want. Instead, you should invoke typescript on the commandline. Do not include systemjs.config.js in your index.html, and make sure the compiled app.js file is available where systemjs will try to fetch it from -- or directly include it with a <script> tag.

Upvotes: 1

Related Questions