Unexpected keyword 'import'


Good morning. Another day, another Groceries tutorial problem.

This time I’m getting the error “JS ERROR SyntaxError: Unexpected keyword ‘import’”. It’s happening in list.component.ts.

The code in that module is

import { Component } from “@angular/core”;

selector: “gr-list”,
templateUrl: “list/list.component.html”,
styleUrls: [“list/list.component.css”]
export class ListComponent { }

and it’s dying on the first line.

Here’s the full stack trace -

***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1 0x10139ae2c -[TNSRuntime executeModule:referredBy:]
2 0x100f6573c -[UIApplication(PlayLiveSync) swizzled_executeModule:]
3 0x100b2162c
4 0x184ae256c
JavaScript stack trace:
1 @file:///app/list/list.component.js:1:33
JavaScript error:
file:///app/list/list.component.js:1:33: JS ERROR SyntaxError: Unexpected keyword 'import’
2017-12-31 05:47:05.212 nsplaydev[17467:3460097] PlayLiveSync: Uncaught Exception

Thanks for any pointers.



Sounds to me like your TypeScript files aren’t properly transpiled to something the runtime understands. So make sure tsc transpiles import to require in list.component.js. If not (which is the case) check your tsconfig.json, especially these lines.


I’m working through the tutorial in the NativeScript Playground. I don’t have (or at least I can’t see) any list.component.js file or a tsconfig.json file in the Explorer on the left side of the Playground. Where would these two files be located?