ES6 generator syntax (yield & function*)

drywolf commented 8 years ago

Hi, I am trying to use ES6 generator syntax with function* & yield, but I get the following error:

ERROR in ./src/index.tsx
Module build failed: SyntaxError: c:/code/test-app/src/index.tsx: Unexpected token (37:18)
            pre = cur;
            cur += temp;
            yield cur;
        }
    },
    _a
    at Parser.pp.raise (c:\code\test-app\node_modules\babylon\lib\parser\location.js:24:13)
    at Parser.pp.unexpected (c:\code\test-app\node_modules\babylon\lib\parser\util.js:82:8)
    at Parser.pp.semicolon (c:\code\test-app\node_modules\babylon\lib\parser\util.js:69:81)
    at Parser.pp.parseExpressionStatement (c:\code\test-app\node_modules\babylon\lib\parser\statement.js:427:8)
    at Parser.parseExpressionStatement (c:\code\test-app\node_modules\babylon\lib\plugins\flow.js:676:20)
    at Parser.pp.parseStatement (c:\code\test-app\node_modules\babylon\lib\parser\statement.js:142:21)
    at Parser.parseStatement (c:\code\test-app\node_modules\babylon\lib\plugins\flow.js:655:22)
    at Parser.pp.parseBlock (c:\code\test-app\node_modules\babylon\lib\parser\statement.js:442:21)
    at Parser.pp.parseStatement (c:\code\test-app\node_modules\babylon\lib\parser\statement.js:105:19)
    at Parser.parseStatement (c:\code\test-app\node_modules\babylon\lib\plugins\flow.js:655:22)

(The code sample that I use for testing is taken from the babel examples page)

In my tsconfig/awesome-ts-loader config I try to target es5 since I want to run the compiled code in the browser.

@s-panferov Is this error also caused by webpack, or is it a different cause ?

PS: before this code I already tried out async & await code with the same tsconfig/awesome-ts config which worked just fine.

(maybe this issue is related to #112 ?!)

Thanks

drywolf commented 8 years ago

After some hours of debugging webpack, babel and awesome-typescript-loader I was able to come up with a solution that allows me to use the ES6 features that I was looking for (async/await & generators/yield syntax) in combination with TypeScript & React.js

Some sample code and the general build configs can be found at this repository: typescript-webpack-generator-sample

To get it to work I had to jump through a couple of hoops though (as noted in the repos' README)

Copy pasted from the README...

The important parts in the project setup to get async/await & generator support working are:

.babelrc config file with the es2015 preset and regenerator transform plugin
inclusion of the "babel-polyfill" in webpack.config.js build configuration
a fix to include the babel-polyfill in the awesome-typescript-loader for webpack
- see fixes\awesome-typescript-loader directory
- needed until issue #121 of awesome-typescript-loader is resolved

s-panferov commented 8 years ago

Require guard added in v0.18.0, so you don't need fixes\awesome-typescript-loader anymore. Please try.

s-panferov / awesome-typescript-loader

ES6 generator syntax (yield & function*) #133