从tsx文件中的controllerApi方法检索数据[模块分析失败错误]

我正试图从数据库中获取一些记录(通过 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>;
}

此代码生成以下错误:

我是从 this example .

我看不出任何语法错误,有什么想法吗?

下面,我也分享 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" }
                ]
            }
        ]
    }
};