Извлечение данных из метода controllerApi в файл tsx [Ошибка синтаксического анализа модуля]

Question

Я пытаюсь извлечь некоторые записи из базы данных (через ControllerApi) и отобразить их через React.Ниже приведен код в файле *.tsx:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
class CourseData {
    courseId: number = 0;
    title: string = "";
}

const FetchCourses = () => { 

    const [courses, setCourses] = useState(0);

    fetch('api/Course/Index')
        .then(response => response.json() as Promise<CourseData[]>)
        .then(data => {
            this.setState({ empList: data, loading: false });
        });

    let contents = this.state.loading ? <p><em>Loading...</em></p> : this.renderCourseTable(this.state.empList);

    return <div>
        <h1>Courses</h1>
        {contents}
    </div>;
}

Этот код генерирует следующую ошибку:

Я принялэтот код из этот пример .

Я не вижу никаких синтаксических ошибок, какие-либо идеи?

Ниже я также делюсь webpack.config.js файлом

const path = require('path');
module.exports = {
    mode: 'development',
    entry: { 'main': './wwwroot/components/Main.tsx' },
    output: {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react', '@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            }
        ]
    }
};

Answer 1

Кажется, что вам не хватает загрузчика веб-пакетов для обработки файлов TSX

module: {
   rules: [
      { test: /\.tsx?$/, include: /wwwroot/components/, use: 'awesome-typescript-loader?silent=true' },
      { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
      { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
   ]
},