1

Trying to build a Typescript project using ts-loader for webpack within gulp. Getting the following error:

stream.js:74 throw er; // Unhandled stream error in pipe. ^ Error: ./app/react/helloDirective.tsx Module parse failed: C:...\app\react\helloDirective.tsx Unexpected token (1:13) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (1:13) at Parser.pp.raise (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:923:13) at Parser.pp.unexpected (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:1490:8) at Parser.pp.expectContextual (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:1449:39) at Parser.pp.parseImport (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:2254:10) at Parser.pp.parseStatement (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:1762:60) at Parser.pp.parseTopLevel (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:1666:21) at Parser.parse (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:1632:17) at Object.parse (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:885:44) at Parser.parse (C:...\node_modules\webpack\lib\Parser.js:902:15) at DependenciesBlock. (C:...\node_modules\webpack\lib\NormalModule.js:104:16)

tsconfig.json

{
"compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": false,
        "removeComments": false,
        "jsx": "react",
        "target": "ES5",
        "moduleResolution": "classic",
        "experimentalDecorators": true,
        "allowJs": true
},
"exclude": ["node_modules", "typedefinitions"]
}

gulpfile.js

gulp.task('compileReactApp', function(){
return gulp.src(["app/react/helloDirective.tsx"])
.pipe(webpack({
    debug: true,  
      output: {
        filename: "reactapp.js"
      },
      resolve: {
        extensions: ['', '.tsx', '.ts', '.js']
      },
      module: {
        loaders: [
          { test: /\.(tsx|ts|js)$/, loaders: ['ts-loader'], include:["app"], exclude: ["node_modules"]}
        ]
      }})
).pipe(gulp.dest("./generated/"));
});

helloDirective.tsx

import React = require('react');
import ReactDOM = require('react-dom');
import Hello = require("./hello.react");

App.Common.commonModule.directive("ReactHello", () => {
return {
    link(scope: any, element: any): void {
        ReactDOM.render(<Hello/>, element);
        element.on('$destroy', () => {

        });
    }
}
});

hello.react.tsx

"use strict";
import React = require("react");

class Hello extends React.Component<any, any> {
render() {
    return <div>
        <span>Hello World!</span>
    </div>; 
}
}

export = Hello;

2 Answers 2

1

I think ts-loader only transforms for typescript. To transform es6 and jsx syntax you will need to add babel-loader to your webpack config.

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

Comments

1

awesome-typescript-loader supports the allowJs option. ts-loader has plans to support it in the future.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.