Я создал свою первую конфигурацию webpack-babel и первый компонент реакт но при запуске вебпак-сервера возникает ошибка

Файл конфигурации вебпака

module.exports = {
entry: "./src/index.js",
module: {
rules: [
  {test: /\.css$/, use: ['style-loader', 'css-loader']},
  {test: /\.(js|jsx)$/, exclude: /node_modules/, use: 'babel-loader'},
  {test: /\.ts$/, exclude: /node_modules/, use: ['babel-loader', 'ts-loader']}
]
},
 output: {
   path: path.resolve(__dirname,'build'),
   filename: "index.js"
},
 devServer:{
  overlay:true
},
 plugins: [
  new HtmlWebpackPlugin(),
],
  mode: "development"
}

файл index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum- 
 scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>

Файл index.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom';

class App extends Component {
render() {
return <div><p>Hello world</p></div>;
}
}

ReactDOM.render(
<App/>,
document.getElementById('root')
);

При выполнении команды webpack-dev-server --mode development --open --hot компиляция проходит нормально и выполняется успешно но в результате вывода в браузере выдаёт ошибку введите сюда описание изображения


Ответы (0 шт):