Trying to dynamic import via React.lazy using a variable string

Question

Using React.lazy to dynamic import component through variable string contains it's path like this:

const product_map = './DVD'

const Product = React.lazy(() => import( `${product_map}`));

and in the return

<Suspense fallback={<></>}>
<Product></Product>
</Suspense>

it shows me this error

./node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js 456:27
Module parse failed: Unexpected token (456:27)
You may need an appropriate loader to handle this file type.
|   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- types are not aware of older browsers that don't implement `labels`
|   if (element.labels !== undefined) {
>     return element.labels ?? [];
|   }
|

I tried using this form Template literals and straight using the variable it's not rendered via React.lazy() except straight string

Answer 1

EDIT: The issue was i was not configured right the bable loader and its plugins in order to load JSX components from a dynamic variable contained the name of component.