Thanks so based on your comment and the other this is modern web development and we accept it.
Building sites in html/css & JavaScript was a better development UX and faster. This constant compiling even quickly is silly and a fourth of my day is spent doing so.
This is still building sites in HTML/CSS & JS. You can even use React without Webpack if you want to if you are okay with a different syntax, and want to avoid transpiling at all cost.
If you want to have quick iteration cycles for tweaking CSS, you still cleanly separate your CSS from the rest of your component and use something like Storybook. The CSS changes will be detected and autoreloaded near instantly (sub-second).
But yeah, if you want to build robust interactive elements with syntactic sugar, you will have to bite the bullet and accept a bit slower refresh time (2-5 seconds with HMR on most projects I worked on).
It's because browsers are the target deployment environment, and browsers move pretty slowly (although a lot faster in recent years). So to use modern language features (such as ES6 or Typescript) you have to transpile back to older JS. For many projects, I don't personally think it's worth the tradeoff of tooling setup and dependencies, so I won't use it in those cases. But for decently complex projects it is nice to use modern language features.
Building sites in html/css & JavaScript was a better development UX and faster. This constant compiling even quickly is silly and a fourth of my day is spent doing so.