JPE | JavaScript Physics Engine | Game Engine library

I have a class View that I am importing and then extending it with galleryView .. Then I import the final galleryView into controller.js.. Somewhere along this path I am doing something wrong as I get this error..

Uncaught TypeError: Super expression must either be null or a function

But I can't figure out what I am doing wrong.. is it babel or webpack or my code?

Here's my webpack config file for development..

I'm doing an upload function that will allow the user to upload a chosen image to the server, and it is supposed to show a thumbnail of the current image. But when another image is chosen, it will add in the newer image thumbnail, and wouldn't remove the older image thumbnail.

So, how do I remove the previous image thumbnail and replace it with the newer one?

Here is my javascript code:

I am using .Net Core 3.1 with React, Typescript and webpack for an SPA. I have multiple modules in react which I load on different page/view of Asp.Net core application.

I am facing issue with auto refresh or hot reload. When I change a parameter which I am passing from module to a component hot reload works as expected BUT if I do any change in component then those are not getting reflected in browser.

If I browse https://localhost:5010/webpack-dev-server I can see home.bundle.js there. Also if change value of "msg" param/prop of HomeComponent in HomeModule.tsx, I can see new bundle generated for home.bundle.js with fresh hashcode and change also reflects to browser on https://localhost:5010/home/ BUT If I do change to HomeComponent.tsx ex: if I change "Home component" to "Home component 123" this change not getting reflected neither on https://localhost:5010/home nor the new bundle NOT generating on https://localhost:5010/webpack-dev-server.

Here is my project structure and files including configuration files. Any help will be highly appreciated.

Update: I added HotModuleReplacementPlugin to webpack.dev.config.js and now when I modify something in component HomeComponent.tsx I see a new entry in https://localhost:5010/webpack-dev-server something like "5f80de77a97d48407bd9.hot-update.json". If I open this file it's content is like {"h":"0dce1f9e44bff4d47fb4","c":{}}

Apart from this another issue is when I run application with F5 from Visual Studio it takes couple of seconds to load website until than browser shows "This site can't be reached"

Project stucture

so I'm creating a ReactJS app and configuring webpack for it. below's my webpack config:

webpack.config.js

I have trouble in routing using react-router-dom and custom dev server using express, webpack-dev-middleware, webpack-hot-middleware.

This is my webpack config.

Please find my webpack config below:

here's my problem. I have added this code to my nginx.conf:

I'm trying to forward all jpeg and png images to webp. It's a Laravel project. Most of images in /storage folder as a symlink in public folder. I followed guides and I know a bit regex but I couldn't find any clue what's wrong.

I have webp images in every folder.

I'm making a "photo uploader" project that can get all sub-files and sub-directory of specific folder.
I've used iterator to get files and directory :