Why am I getting "Unexpected token import" on one webpack project but not the other?

Question

I have 2 projects that are working differently and I cannot tell what is different. I have the following on one project...

// In .ts wile import 'core-js/es6'; import 'reflect-metadata'; 

This works great on one project, however, another project with the same tsconfig.json and typings.json as well as the ts-loader configured in the webpack config I get...

Uncaught SyntaxError: Unexpected token import

The transpiled JS on the failing one looks like this...

/***/ function(module, exports, __webpack_require__) {      /* WEBPACK VAR INJECTION */(function(process) {import 'core-js/es6';     import 'reflect-metadata'; 

I will post the succeeding project one in a bit

So my question is what am I missing? Are the typescript definitions not being imported properly? I already tried running typings install again just to rule that out.

More Info

//tsconfig {   "compilerOptions": {     "target": "es5",     "module": "commonjs",     "moduleResolution": "node",     "sourceMap": true,     "emitDecoratorMetadata": true,     "experimentalDecorators": true,     "removeComments": false,     "noImplicitAny": true,     "suppressImplicitAnyIndexErrors": true   } }  // Typings.json {   "globalDependencies": {     "core-js": "registry:dt/core-js#0.0.0+20160602141332",     "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",     "node": "registry:dt/node#6.0.0+20160621231320"   } } 

Answer 1

I had a similar issue where I was using async\await and Promises (both ES6 constructs) using the import keyword in the ts source files to import other ts modules.

I could transpile with TypeScript using the default js target version (ES5) which produces transpile errors complaining about the async\await and Promise keywords but since I'm actually running Node 6.4.0. everything actually works at runtime.

In the case described above, the 'Import' keyword was translated from ts to js as:

var BasePage_1 = require('./BasePage'); 

So, I'm getting tsc transpile errors but Node works fine at runtime with the above 'Import' translation.

If I use the -t switch to tell tsc to transpile to ES6 then the transpile is clean with no errors but then Node fails because it says it doesn't understand the 'Import' keyword in the emitted js file.

Now, tsc emits the following translation for 'Import':

import { BasePage } from './BasePage';

So, the above translation really isn't a translation at all and Node chokes on the js file with the 'Import' keyword at runtime.

Summary:

I solved this conundrum using this command line to tell tsc to use ES6 libraries but to emit the proper module import syntax:

myTypeScriptSourceFile.ts -t ES6 -m commonjs 

Now I get a clean transpile and no runtime errors from Node. Because now 'Import' is being properly translated using the 'require' reserved word.

More details here: https://www.typescriptlang.org/docs/handbook/compiler-options.html https://www.typescriptlang.org/docs/handbook/module-resolution.html

Answer 2

addendum to the accepted answer for the busy programmer, the command line option can also be made inside tsconfig.json file:

{   "compilerOptions": {     // ...other options     "module": "commonjs", // add this     "target": "es6", // and this  }