VS2015 TypeScript Cannot compile modules unless the ‘–module’ flag is provided build error

Introduction

In Visual studio 2015 i had big troubles using TypeScript import statements in combination with exporting modules. At build i got TypeScript compiler errors stating : Cannot compile modules unless the '--module' flag is provided build error.

I used TypeScript and modules before without running into this problem, but in those cases i didn’t use import statements to include external modules/files and i didn’t export the modules. I was using the modules as namespaces from where i exported classes. I used MVC bundling to load files in bundles, so no dynamic javascript loading.

I learned that importing external modules leads to require statements in your output javascript files and that is not native javascript. You should learn about the various systems when deciding what system to use. At the bottom of the post i included some links i found while googling for the solution.

How to fix

For .NET Core projects this problem can be fixed by setting up a tsconfig.json file from where you provide the module system you want to use. Older .net projects can have various issues with TypeScript configuration that all relate to the TypeScript property group section in the Visual studio project file.

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
  }
}

This tsconfig.json file example shows where to provide the –module flag. Use this if your project type is ASP.NET Core, if not you will probably have to fix this by editing your project file. In that case, you don’t need the tsconfig.json file since it is not supported correct.

Project file
In non .NET Core project you can setup your TypeScript build configuration in the Visual Studio project file. The project file is editable by unloading the project in the Visual Studio solution explorer, right clicking the unloaded project, and choose to edit the project file. After changing the file you should save it and reload the project, by right clicking it again in the Solution explorer. The following example shows a working TypeScript (module) configuration for your Visual Studio project file.

  <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
    <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
    <TypeScriptModuleKind>CommonJS</TypeScriptModuleKind>
    <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
    <TypeScriptOutFile />
    <TypeScriptOutDir />
    <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
    <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
    <TypeScriptSourceMap>True</TypeScriptSourceMap>
    <TypeScriptMapRoot />
    <TypeScriptSourceRoot />
  </PropertyGroup>

This property group should be added if missing to the project file to enable the commonjs module system at build time. Keep in mind 'Debug|AnyCPU' must contains no spaces, check for that if even if the section is already there. If the section is already there make sure the TypeScriptModuleKind element is configured.

After setting this setting in the project file you could have a module like

somemodule.ts

export module someModule {
   export class Test {
       public Lorem: string = 'Ipsum';
   }
}

and you could import it as

test.ts

import {someModule} from './somemodule';
var test = new someModule.Test();
alert(this.s.Lorem);

This outputs to a test.js output file which contains

var somemodule_1 = require('./somemodule');
var test = new somemodule_1.someModule.Test();
alert(this.s.Lorem);
//# sourceMappingURL=test.js.map

Keep in mind that this example uses the commonjs module system which inserts require('./somemodule'); statement that is NodeJs and not native Javascript.

Things that helped me fix this

When i fixed the problem i digged into the workings of import statements and external modules and i found some nice YouTube video on TypeScript module systems that got me started.

Some extra resource where i read about TypeScript/javascript (EcmaScript 2015) modules.

https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Modules.md

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>