Unexpected Token < : Webpack configuration issue with Typescript, React

Question

Can anyone help me resolve the issue? I started project with Typescript, React, Webpack and the help from https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

I configured everything and when i try to run the command webpack i am getting the error

ERROR in ./app/index.tsx
Module parse failed: app/index.tsx Unexpected token (10:4)
You may need an appropriate loader to handle this file type.
| 
| ReactDOM.render(
|     <Hello compiler="TypeScript" framework = "React" />,
|     document.getElementById("example")
| );

I have similar configuration and same source files as mentioned.

Webpack.config.js

const path = require('path');
module.exports = {
entry: path.join(__dirname, "/app/index.tsx"),
output: {
    filename: "bundle.js",
    path: path.join(__dirname, "/dist")
},

// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",

resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [ ".webpack.js", ".web.js", ".ts", ".tsx", ".js" ]
},

module: {
    loaders: [
        // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
        {
            test: /\.tsx?$/,
            include: path.join(__dirname, '/app'),
            loaders: [ "babel-loader", "awesome-typescript-loader"],
            query: {
                presets: [ "react", "es2015" ]
            }
        }
    ],

    rules: [
        // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
        {
            test: /\.js$/,
            include: path.join(__dirname, '/app'),
            loader: "source-map-loader"}
    ]
},

// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
    "react": "React",
    "react-dom": "ReactDOM"
}

};

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";

import {Hello} from "./components/Hello";

ReactDOM.render(
    <Hello compiler="TypeScript" framework = "React" />,
    document.getElementById("example")
);

Answer 1

Not sure this answers your specific issue, but I got the same error. It turned out Jest had changed my tsconfig.json. Even if you're not using Jest, this may still apply to you.

tsconfig was changed from:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "module": "esnext",
    "target": "es5",
    "sourceMap": true,
    "jsx": "react",
    "allowJs": true,
    "lib": [ "dom", "dom.iterable", "esnext" ],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "strict": false,
    "noEmit": true
  },
  "exclude": [ "node_modules" ],
  "include": [ "src" ]
}

to:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "module": "esnext",
    "target": "es5",
    "sourceMap": true,
    "jsx": "preserve",
    "allowJs": true,
    "lib": [ "dom", "dom.iterable", "esnext" ],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "strict": false,
    "noEmit": true
  },
  "exclude": [ "node_modules" ],
  "include": [ "src" ]
}

Note option "jsx" has been changed from "react" to "preserve". Changing this back fixed my issue

Answer 2

I had to change the webpack config to

const path = require('path');
module.exports = {
    entry: path.join(__dirname, "/app/index.tsx"),
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "/dist")
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [ ".webpack.js", ".web.js", ".ts", ".tsx", ".js" ]
    },

    module: {
        rules: [ {
            test: /\.tsx$/,

            use: [
                // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
                {
                    loader: "babel-loader"
                }
            ]
        }, {
            test: /\.js$/,
            use: [
                {
                    loader: "source-map-loader"
                }
            ]
        }
        ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

And somehow its working without typescript loader.

Answer 3

I know this does not directly answer your question, but it might gave you an alternative way to solve your problem.

I'm new to react and webpack myself, but in my setup I build the TSX files using typescript and then point webpack to the transpiled js files. Whether this approach has any drawbacks apart from the complexities of having to run a 2 step build process I don't know, but it has worked well enough for me so far. Using this approach, my webpack config file looks like this:

module.exports = {
  devtool: "inline-source-map",
  entry: './wwwroot/app/components/root.js',
  output: {
    filename: 'bundle.js',
    path: "./wwwroot/js/"
  },
  module: {
    rules: [
     {
       enforce: 'pre',
       test: /\.js$/,
       loader: "source-map-loader"
     }
   ]
  }
};