How do I properly use webpack to share a React component?

Question

I know this question has been asked at least a few times (use webpack to bundle a React component to be imported by another React component, Exposing React Components using Webpack) but I'm still struggling to get this working.

Here's the example: https://github.com/neolanders/module_federation_import/

Although the example's ultimate goal deals with module federation, the problem I'm currently having has nothing to do with module federation. The problem is when legacyApp tries to import host, then I get this error:

Compiled with problems:X

ERROR in ./node_modules/host/src/App.jsx 67:11

Module parse failed: Unexpected token (67:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|   if (!props.system) {
>     return <h2>Not system specified</h2>;
|   }
| 

I've worked around the issue by in legacyApp explicitly transpiling host when it is part of node_modules:

https://github.com/neolanders/module_federation_import/blob/main/legacyApp/webpack.config.js#L32

But this is a workaround, as I'm pretty sure I'm doing something wrong in host to expose the App component. Can someone please tell me what I'm missing?

EDIT: I found SWC-loader, and that works as well. But I'm wondering if it's the best approach