模块解析失败：意外令牌 (10:11)

Question

我是编程新手，正在学习教程 (https://www.youtube.com/watch?v=YEmjBEDyVSY&t=589s) 但是，我不断收到以下错误：

ERROR in ./src/components/app.js 10:11
Module parse failed: Unexpected token (10:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|   render() {
>     return <h1>{this.props.name}</h1>; 
|   }
| }
 @ ./src/index.js 1:0-38

webpack 5.45.1 compiled with 1 error in 103 ms

当我跑步时：npm run dev

App.JS

import React, { Component } from "react";
import { render } from "react-dom";

export default class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <h1>{this.props.name}</h1>; 
  }
}

const appDiv = document.getElementById("app"); 
render(<App name='matt' />, appDiv);