Typescript import module es6 "File is not a module error"

Question

I am using typescript 1.6 with es6 module syntax.

My files:

test.ts:

module App { export class SomeClass { getName(): string { return 'name'; } } } 

main.ts:

 import App from './test'; var a = new App.SomeClass(); 

When I try to compile the main.ts file, I get this error:

Error TS2306: file test.ts is not a module.

How can i do this?

Answer 1

Advanced - to provide more detailed information based on some comments

Mistake

Error TS2306: The file test.ts is not a module.

Based on the fact described here http://exploringjs.com/es6/ch_modules.html

17. Modules

This chapter explains how plug-ins work in ECMAScript 6.

17.1 Overview

In ECMAScript 6, modules are stored in files. There is exactly one module per file and one file per module. You have two ways to export things from a module. These two methods can be mixed, but it is usually best to use them separately.

17.1.1 Multiple Export Names

There may be several named exports:

 //------ lib.js ------ export const sqrt = Math.sqrt; export function square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); } ... 

17.1.2 Separate default export

There may be one default export. For example, the function:

 //------ myFunc.js ------ export default function () { ··· } // no semicolon! 

Based on the foregoing, we need export as part of the test.js file. Let me adjust its contents as follows:

 // test.js - exporting es6 export module App { export class SomeClass { getName(): string { return 'name'; } } export class OtherClass { getName(): string { return 'name'; } } } 

And now we can import it using the following methods:

 import * as app1 from "./test"; import app2 = require("./test"); import {App} from "./test"; 

And we can use imported things as follows:

 var a1: app1.App.SomeClass = new app1.App.SomeClass(); var a2: app1.App.OtherClass = new app1.App.OtherClass(); var b1: app2.App.SomeClass = new app2.App.SomeClass(); var b2: app2.App.OtherClass = new app2.App.OtherClass(); var c1: App.SomeClass = new App.SomeClass(); var c2: App.OtherClass = new App.OtherClass(); 

and call the method to see it in action:

 console.log(a1.getName()) console.log(a2.getName()) console.log(b1.getName()) console.log(b2.getName()) console.log(c1.getName()) console.log(c2.getName()) 

The original part tries to help reduce the complexity of using namespaces

Source part:

I would highly recommend checking these Q and A:

How to use namespaces with TypeScript external modules?

Let me give you the first sentence:

Do not use "namespaces" in external modules.

Do not do this.

Really. Stop.

...

In this case, we simply do not need module inside test.ts This may be the contents of his customized test.ts :

 export class SomeClass { getName(): string { return 'name'; } } 

More here

Export =

In the previous example, when we consumed each validator, each module exported only one value. In such cases, it is cumbersome to work with these characters through their qualified name, when one identifier will do the same.

The syntax export = indicates a single object that is exported from a module . It can be a class, interface, module, function, or enumeration. When importing, the exported symbol is consumed directly and is not subject to any name.

we can use it later as follows:

 import App = require('./test'); var sc: App.SomeClass = new App.SomeClass(); sc.getName(); 

More details here:

Additional module downloads and other advanced loading scripts

In some cases, you may want to download a module only in certain conditions. In TypeScript, we can use the template shown below to implement this and other advanced loading scripts to directly call module loaders without losing type security.

The compiler determines whether each module is used in the emitted JavaScript. For modules that are used only as part of a type system, calls are not required. This is a rejection of unused links - a good performance optimization, as well as the possibility of additional loading of these modules.

The main idea of ​​the template is that the import id = require ('...') operator gives us access to types opened by an external module. The module loader is called (via a request) dynamically, as shown in the if blocks below. This simplifies link optimization, so the module is loaded only when necessary. For this pattern to work, it is important that the symbol defined by import is used only in type positions (i.e., never in a position that would not be selected in JavaScript).

Answer 2

How can i do this?

This example declares TypeScript <1.5, which is now called namespace . The old syntax for module App {} now equivalent to namespace App {} . As a result, the following work:

 // test.ts export namespace App { export class SomeClass { getName(): string { return 'name'; } } } // main.ts import { App } from './test'; var a = new App.SomeClass(); 

It is said ...

Try to avoid exporting namespaces and instead export modules (which were formerly called external modules). If necessary, you can use the namespace when importing with the namespace import template as follows:

 // test.ts export class SomeClass { getName(): string { return 'name'; } } // main.ts import * as App from './test'; // namespace import pattern var a = new App.SomeClass(); 

Answer 3

The above answers are correct. But just in case ... I got the same error in VS Code. I had to re-save / recompile the file that generated the error.

Answer 4

In addition to A. Tim 's answer, there are times when even this does not work, so you need to:

1. Rewrite the import string using intellisense. Sometimes this solves the problem
2. Restart VS Code

Answer 5

code recompilation, i.e. running ng-serve helped me.

Answer 6

In addition to Tim’s answer, this problem occurred to me when I split file refactoring, splitting it into my own files.

VSCode, for some reason, highlighted parts of my code [class], which caused this problem. At first it was hard to notice, but after I realized that the code was indented, I formatted the code and the problem disappeared.

for example, everything after the first line of the class definition was automatically inserted at insertion.

 export class MyClass extends Something<string> { public blah: string = null; constructor() { ... } }