React/TypeScript unexpected token

Question

I'm building out a react/TS app and am running into this compiler error. I'm sure it's a config issue, but alas, I can't figure out which config. I'm not sure if it has to do with the generic specifically, or if I will see the "unexpected token" error show up in other circumstances as well.

ERROR in ./src/App.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/.../src/App.tsx: Unexpected token (15:4)

  13 |   const [coordinates, setCoordinates] = useState<
  14 |     CoordinatesQueryType | undefined
> 15 |   >();
     |     ^
  16 |

Webpack config follows. FWIW I added "react" to module.rule.options, but then i got another error that said I was missing "babel-preset-react", installed that, then another error, and then didn't wanna go down the rabbit hole.

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.tsx",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx", ".ts", ".tsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    port: 4000,
    hot: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};

And babel.rc:

{
  "presets": ["@babel/env", "@babel/preset-react", "@babel/preset-flow"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

Answer 1

Is there any setup for typescript?

I think you are missing this in babel presets: @babel/preset-typescript

And also I can't see any ts-loader in your webpack config. So you would not get typechecking even though you compile typescript. To fix this:

Change current rule for babel to match only js files

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },

Install necessary tools: yarn add -D @babel/preset-typescript ts-loader

Add @babel/preset-typescript to babel.rc presets. Add ts-loader to webpack.config.js module rules.

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
     // Typescript loader
     {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: ["ts-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },

I think this should be able to fix the problem. Also, you are having both options\presets and .babelrc, try to use only one of these for configuration.