Throws syntax error for valid syntax

[0livare]

I'm in the process of creating a React v16 app with Redux v4 and Typescript v2.7. I'm having an odd issue where ts-node, when running my tests, exhibits different behavior than awesome-typescript-loader, that I use to build and run my project.

It's specifically around a particular instance of the as keyword. This is complicated further by the fact that I'm using a version of redux-thunk that currently resides in a pull request in order to allow redux-thunk to support Redux v4 with Typescript.

Running ts-node scirpt.ts on

script.ts:

require('babel-register')({
  extensions: ['.ts', '.tsx'],
})

require('configureStore')

configureStore.ts:

import { createStore, applyMiddleware } from 'redux'
import thunk, { ThunkAction, ThunkMiddleware } from 'redux-thunk'

type MyState = {foo: number}
type MyAction = {type: "foo"}

function myReducer(state: MyState, action: MyAction) {
  return state
}

function configureStore(state: MyState) {
  const store = createStore(
    myReducer,
    applyMiddleware(thunk as ThunkMiddleware<MyState, MyAction>),
  )
  return store
}

generates the following error:

SyntaxError: configureStore.ts: Unexpected token, expected , (14:26)
  12 |   const store = createStore(
  13 |     myReducer,
> 14 |     applyMiddleware(thunk as ThunkMiddleware<MyState, MyAction>),
     |                           ^
  15 |   )
  16 |   return store
  17 | }
    at Parser.pp$5.raise (C:\dev\js-starter-kit\node_modules\babylon\lib\index.js:4454:13)
    at Parser.pp.unexpected (C:\dev\js-starter-kit\node_modules\babylon\lib\index.js:1761:8)
    at Parser.pp.expect (C:\dev\js-starter-kit\node_modules\babylon\lib\index.js:1749:33)
    at Parser.pp$3.parseCallExpressionArguments (C:\dev\js-starter-kit\node_modules\babylon\lib\index.js:3564:12)
    at Parser.pp$3.parseSubscripts (C:\dev\js-starter-kit\node_modules\babylon\lib\index.js:3533:31)
    at Parser.pp$3.parseExprSubscripts (C:\dev\js-starter-kit\node_modules\babylon\lib\index.js:3504:15)
    at Parser.pp$3.parseMaybeUnary (C:\dev\js-starter-kit\node_modules\babylon\lib\index.js:3474:19)
    at Parser.pp$3.parseExprOps (C:\dev\js-starter-kit\node_modules\babylon\lib\index.js:3404:19)
    at Parser.pp$3.parseMaybeConditional (C:\dev\js-starter-kit\node_modules\babylon\lib\index.js:3381:19)
    at Parser.pp$3.parseMaybeAssign (C:\dev\js-starter-kit\node_modules\babylon\lib\index.js:3344:19)

The fact that it's a syntax error really confuses me. Because that same exact code runs fine with webpack and awesome-typescript-loader, and I believe it to be valid syntax. The as keyword works elsewhere, so what makes this particular instance invalid?

Also, if you put all this code in the same file and don't require one from the other, the issue does not happen!! That doesn't make any sense to me.

ts-node --version returns the following:

ts-node v5.0.1
node v6.10.3
typescript v2.7.2

The problem as described here is reduced as far as I could get it, but if it's helpful, I've published a testsFail branch here on the project I'm working on where the issue originates from. To see it, clone the project, check out the testsFail branch, and run npm install. Then replace node_modules/redux-thunk/index.d.ts with this one from the aforementioned pull request. And finally run npm test to see the error. If you go to the previous commit, the tests will pass but npm start will fail.

Thank you in advance for any help!

[blakeembrey]

That error comes from babel (see stack trace) and is caused by registering babel for .ts and .tsx over the top of ts-node. Babel only reads from files in the current release IIRC, what version are you using?

[0livare]

@blakeembrey Thank you for your response. When I try removing babel, I get errors with async. Is there a nice way to make ts-node and babel work in unison?

Here are my babel versions:

"babel-cli": "6.16.0",
"babel-core": "6.17.0",
"babel-register": "6.16.3",

    async saveCourse(event) {
          ^^^^^^^^^^
SyntaxError: Unexpected identifier
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Module.m._compile (C:\dev\zach\project\node_modules\ts-mocha\node_modules\ts-node\src\index.ts:392:23)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .tsx] (C:\dev\zach\project\node_modules\ts-mocha\node_modules\ts-node\src\index.ts:395:12)

[blakeembrey]

This is an issue with babel unfortunately, they're reading directly from file circumventing ts-node altogether. You can try the 7.0 beta where I believe they fixed this. Otherwise, you can transpile async using TypeScript - what's your tsconfig.json file?

[0livare]

@blakeembrey I can definitely try the babel beta, thank you for the suggestion!

I was attempting to target esnext with Typescript so that it would transpile things like this, but when it didn't seem to work I turned to babel lol

Here is my tsconfig.json, is there some amendment I can make to it to successfully transpile async?

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "esnext",
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ]
}

[blakeembrey]

@zposten Target esnext means no language features are being transpiled (you're saying that your target supports esnext, aka everything used). Try es2015 or es2016 depending on node.js version.