How to Resolve Typescript Error Unexpected Token Import?

Question

I'm writing an Angular 4 theme for Wordpress 4.8 to be used on mainly Edge and Chrome browsers. My test script fails on test.ts with the error:

Uncaught SyntaxError: Unexpected token import at src/test.js:1

My tsconfig.json in the \src folder is as follows:

{
  "compilerOptions": {
  "module": "commonjs",
  "target": "es5",
  "moduleResolution": "node",
  "sourceMap": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "lib": [ "es2016", "es5", "dom"],
  "noImplicitAny": true,
  "suppressImplicitAnyIndexErrors": true
}
}

tsconfig.json at the root level is:

{
  "compileOnSave": false,
  "compilerOptions": {
  "outDir": "./dist/out-tsc",
  "baseUrl": "src",
  "sourceMap": true,
  "declaration": false,
  "moduleResolution": "node",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "target": "es5",
  "typeRoots": [
     "node_modules/@types"
     ],
  "lib": [
     "es2016",
     "dom",
     "es5"
     ]
  }
 }

My test.ts consists of:

import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from 
"@angular/platform-browser-dynamic/testing";
import {getTestBed} from "@angular/core/testing";

declare var _karma_: any;
declare var require: any;

_karma_.loaded = function () {};

getTestBed().initTestEnvironment(
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting()
);

const context = require.context('./', true, /\.spec\.ts$/);

context.keys().map(context);

_karma_.start();

What would be the best approach to resolve this error?

basarat · Accepted Answer · 2017-10-31 04:46:21Z

3

Uncaught SyntaxError: Unexpected token import at src/test.js:1

import should be compiled away by TypeScript

Fix

Make sure that ts is actually passing through the TypeScript compiler (to get actual JS).

This is a configuration error. "module": "es6", is wrong. Suggest using "module": "commonjs", with webpack.

More

Quickstart https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html

answered Oct 31, 2017 at 4:46

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashish Detroja · Accepted Answer · 2017-10-31 04:48:47Z

2

You will see the same issue if you cd to your ./app/ui directory and run tsc -p . there...

the problem is that your are using "module": "system" in your tsconfig.json

TypeScript has two strategies to resolve module names:

node - mimics the way how module names are resolved in NodeJS classic
original strategy that doesn't take node_modules into account when walking up the folder structure looking for modules (see https://www.typescriptlang.org/docs/handbook/module-resolution.html for details). Strategy can be specified via moduleResolution compiler option. If this option is omitted compiler will use node when target module kind is commonjs and classic otherwise So, in your case classic resolution is used, and modules from node_modules are not found. I'd suggest specifying resolution explicitly in your config:

"moduleResolution": "node",

does it help?

answered Oct 31, 2017 at 4:48

Ashish Detroja

1,0823 gold badges10 silver badges32 bronze badges

2 Comments

SidC Over a year ago

Should this be added to the top level tsconfig.json or the one inside the src folder?

Ashish Detroja Over a year ago

@SidC Please follow this link intellij-support.jetbrains.com/hc/en-us/community/posts/…

Collectives™ on Stack Overflow

How to Resolve Typescript Error Unexpected Token Import?

2 Answers 2

Fix

More

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Fix

More

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related