Module Parse Failed: Unexpected token in Webpack Typescript Loader

szahn

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;
szahn

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Webpack failed to parse TypeScript module: Unexpected token

From Dev

webpack tsx Module parse failed: Unexpected token

From Dev

React / Webpack - "Module parse failed: Unexpected token - You may need an appropriate loader to handle this file type."

From Dev

Webpack fails to parse typescript files. Module parse failed: Unexpected token

From Dev

Module parse failed: Unexpected token (9:37) with babel-loader

From Dev

Module parse failed: Unexpected token (7:5) You may need an appropriate loader to handle this file type. : Webpack, Bootstrap

From Dev

Module parse failed: Unexpected token when using webpack 5

From Dev

Webpack error after upgrading Node: "Module parse failed: Unexpected token"

From Dev

Module parse failed: Unexpected token using webpack-dev-server

From Dev

Module parse failed: Unexpected token

From Javascript

React - Module parse failed: Unexpected Token. You may need an appropriate loader to handle this file type

From Dev

Module parse failed: Unexpected token (257:106) You may need an appropriate loader to handle this file type

From Dev

Webpack 4 - Module parse failed: Unexpected character '@'

From Dev

webpack module parse failed Unexpected character '@'

From Dev

Webpack 4 - Module parse failed: Unexpected character ' '

From Dev

How to fix Module parse failed: Unexpected token?

From Dev

Module parse failed: Unexpected token ionic 3

From Dev

Module parse failed: Unexpected token (7855:112)

From Dev

Vue Module parse failed: Unexpected token

From Dev

Module parse failed: Unexpected token (11:19)

From Dev

Module parse failed: Unexpected token (6:16) when building react with webpack

From Dev

Webpack 4 basic React js hello world fails with "Module parse failed: Unexpected token"

From Dev

React and Webpack Module parse failed: /testimonials.js Unexpected token (6:4)

From Dev

Module parse failed: Unexpected character '�' in an image with vuetify loader

From Dev

ReactJS: Importing symlinked components error: Module parse failed: Unexpected token: You may need an appropriate loader to handle this file type

From Dev

Module parse failed with webpack and react, even using babel-loader

From Dev

Webpack module build failed unexpected token (rails react build)

From Dev

Webpack, React JSX, Babel: Module build failed, "unexpected token" empty?

From Dev

Webpack 4 error - Module parse failed: Unexpected character '@'

Related Related

  1. 1

    Webpack failed to parse TypeScript module: Unexpected token

  2. 2

    webpack tsx Module parse failed: Unexpected token

  3. 3

    React / Webpack - "Module parse failed: Unexpected token - You may need an appropriate loader to handle this file type."

  4. 4

    Webpack fails to parse typescript files. Module parse failed: Unexpected token

  5. 5

    Module parse failed: Unexpected token (9:37) with babel-loader

  6. 6

    Module parse failed: Unexpected token (7:5) You may need an appropriate loader to handle this file type. : Webpack, Bootstrap

  7. 7

    Module parse failed: Unexpected token when using webpack 5

  8. 8

    Webpack error after upgrading Node: "Module parse failed: Unexpected token"

  9. 9

    Module parse failed: Unexpected token using webpack-dev-server

  10. 10

    Module parse failed: Unexpected token

  11. 11

    React - Module parse failed: Unexpected Token. You may need an appropriate loader to handle this file type

  12. 12

    Module parse failed: Unexpected token (257:106) You may need an appropriate loader to handle this file type

  13. 13

    Webpack 4 - Module parse failed: Unexpected character '@'

  14. 14

    webpack module parse failed Unexpected character '@'

  15. 15

    Webpack 4 - Module parse failed: Unexpected character ' '

  16. 16

    How to fix Module parse failed: Unexpected token?

  17. 17

    Module parse failed: Unexpected token ionic 3

  18. 18

    Module parse failed: Unexpected token (7855:112)

  19. 19

    Vue Module parse failed: Unexpected token

  20. 20

    Module parse failed: Unexpected token (11:19)

  21. 21

    Module parse failed: Unexpected token (6:16) when building react with webpack

  22. 22

    Webpack 4 basic React js hello world fails with "Module parse failed: Unexpected token"

  23. 23

    React and Webpack Module parse failed: /testimonials.js Unexpected token (6:4)

  24. 24

    Module parse failed: Unexpected character '�' in an image with vuetify loader

  25. 25

    ReactJS: Importing symlinked components error: Module parse failed: Unexpected token: You may need an appropriate loader to handle this file type

  26. 26

    Module parse failed with webpack and react, even using babel-loader

  27. 27

    Webpack module build failed unexpected token (rails react build)

  28. 28

    Webpack, React JSX, Babel: Module build failed, "unexpected token" empty?

  29. 29

    Webpack 4 error - Module parse failed: Unexpected character '@'

HotTag

Archive