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")
);

Same as in typescriptlang.org/docs/handbook/react-&-webpack.html — ram2013
– ram2013, Commented Feb 28, 2017 at 9:20

Jan M · Accepted Answer · 2019-05-31 08:25:44Z

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

Morten Christiansen · Accepted Answer · 2017-02-28 08:31:05Z

0

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"
     }
   ]
  }
};

answered Feb 28, 2017 at 8:31

Morten Christiansen

19.7k23 gold badges76 silver badges97 bronze badges

1 Comment

ram2013 Over a year ago

Thank you Morten. This is something i am not looking for. I am learning react and I don't want to start with workarounds. Thank you.

ram2013 · Accepted Answer · 2017-03-02 10:19:55Z

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.

Collectives™ on Stack Overflow

Unexpected Token < : Webpack configuration issue with Typescript, React

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related