Intro
I have a task to add some new features/refactor other things in not-so-new Express + Preact 10 + Webpack 5 + Babel 7 project. And I have a problem with loading non-js file running locally for development. I've got Syntax error with unexpected token at... for non-js files.
For now, I've found that it's because @babel/register tries to read png/css/anything as a js file.
Disclaimer
I know there is a similar question here with an answer - use require.extensions['.css'] = () => {}; and it works fine.
extensions are deprecated so it's not an option.
And, what is more important, doesn't explain why it's happening and how to fix it properly.
The code
I cannot give the code (company stuff) so it's a theoretical question, I'm afraid.
I've tried
I've tried every possible option from Babel docs.
For SVG files I've found a library that solves this problem.
I've found a dead library for ignoring styles (css/scss etc.).
But adding a library 1) doesn't fix the problem in a complex way 2) doesn't explain why this is happening, what's wrong (or not wrong but set).
I want to understand why and how to fix it one and for good.
Maybe it's something I've missed? Some configuration? How does it work? Where to look for an answer?