Что не так с конфигурацией webpack и почему при выводе верстки выдает ошибку?

Question

[SeventimeSsS]

Скачал готовую сборку webpack https://github.com/taniarascia/webpack-boilerplate, подстроил под себя, но при запуске в режиме разработчика выдает такую ошибку




Как я понял в ошибке сказано что мне нужно поставить @babel/preset-react в babel, как я и сделал

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

App.js который объединяет в себе все файлы, хочу передать его в index.js

import React from 'react';

import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import { useState, useEffect } from 'react';

import '../styles/App.scss';

import MainPage from './MainPage';
import ChanelPage from './ChanelPage'

const App = () => {

  const [chanelData, setChanelData] = useState(null);
  const [id, setId] = useState();

  const updateDataParent = (index) => {
    setId(index)
  }

  async function getResponse() {
    let response = await fetch('https://limehd.online/playlist/channels.json')
    let content = await response.json()
    setChanelData(content.channels)
  }

  useEffect(() => {
      getResponse();
  }, [])

    return (
        <Router>
            <div className="App">
                <Routes>
                <Route path='/' element={<MainPage updateDataParent={updateDataParent}/>} />
                <Route path='/ChanelPage' element={<ChanelPage id={id} chanelData={chanelData}/>} />
                </Routes>
            </div>
        </Router>
    )
}

export default App

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

// Test import of a JavaScript module
import { example } from '../src/js/example'
import App from './js/App';

// Test import of styles
import '@/styles/index.scss'

// const heading = document.createElement('div')
// heading.append = example()

// const app = document.querySelector('#root')
// app.append(heading)

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

Webpack на всякий случай

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const paths = require('./paths')

module.exports = {
  // Where webpack looks to start building the bundle
  entry: [paths.src + '/index.js'],

  // Where webpack outputs the assets and bundles
  output: {
    path: paths.build,
    filename: '[name].bundle.js',
    publicPath: '/',
  },

  // Customize the webpack build process
  plugins: [
    // Removes/cleans build folders and unused assets when rebuilding
    new CleanWebpackPlugin(),

    // Copies files from target to destination folder
    new CopyWebpackPlugin({
      patterns: [
        {
          from: paths.public,
          to: 'assets',
          globOptions: {
            ignore: ['*.DS_Store'],
          },
          noErrorOnMissing: true,
        },
      ],
    }),

    // Generates an HTML file from a template
    // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
    new HtmlWebpackPlugin({
      title: 'webpack Boilerplate',
      favicon: paths.src + '/images/favicon.png',
      template: paths.src + '/template.html', // template file
      filename: 'index.html', // output file
    }),
  ],

  // Determine how modules within the project are treated
  module: {
    rules: [
      // JavaScript: Use Babel to transpile JavaScript files
      { test: /\.js$/, use: ['babel-loader'] },

      // Images: Copy image files to build folder
      { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource' },

      // Fonts and SVGs: Inline files
      { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline' },
    ],
  },

  resolve: {
    modules: [paths.src, 'node_modules'],
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      '@': paths.src,
      assets: paths.public,
    },
  },
}

Буду рад любой подсказке даже если вы не уверены сработает ли это