Ionic 2 - "import" and "export" can only be displayed with "sourceType: module"

Question

Working on a new project with a very new installation of ionic2 after installing angular2 -jwt I get this error:

ParseError: 'import' and 'export' may appear only with 'sourceType: module' D:\desenv\arquivos\workspace_inbit\medipop-parent\medipop-app\node_modules\angular2-jwt\angular2-jwt.ts:1 import {Injectable, Injector} from 'angular2/core'; 

Playback:

 ionic start testapp --v2 --ts cd testapp npm i --save angular2-jwt 

and application pages:

 @App({ templateUrl: 'build/app.html', providers: [ provide(AuthHttp, { useFactory: (http) => { return new AuthHttp(new AuthConfig({ headerPrefix: '', noJwtError: true }), http); }, deps: [Http] }) ] }) class MyApp {} 

Does anyone know how to solve this little riddle?

Answer 1

Try adding this line to your ts configuration:

 "parserOptions": { "ecmaVersion": 6, "sourceType": "module" }, 

If this does not work, try with this config that works on my computer ( tsconfig.json ):

 { "compilerOptions": { "noImplicitAny": true, "module": "commonjs", "target": "ES5", "emitDecoratorMetadata": true, "experimentalDecorators": true, "sourceMap": true, "declaration": true, "moduleResolution":"node" }, "files": [ "angular2-jwt.ts", "typings/browser.d.ts", "custom.d.ts" ] } 

Answer 2

'import' and 'export' can only be displayed with 'sourceType: module'

You need to specify module in your tsconfig or on the command line. eg.

 'module': 'commonjs' 

More details

https://basarat.gitbooks.io/typescript/content/docs/project/modules.html

Answer 3

I had the same problem today on Ionic 2 beta 11, and for me it was an extension file (.js) (user-data.js) instead of a file (.ts) (user-data.ts), so changing the .js extension file on .ts solved my problem.