Importing Mantine styling library causes compilation failure

[yahiaboudah]

OS: Windows:
BROWSER: CHROME: Version 101.0.4951.67 (Official Build) (64-bit)

How to reproduce the error with npm:

in terminal:

• create-cep-extension myapp
• npm install @mantine/core @mantine/hooks (react component library)
• cd myapp/src
• [vim|code|(text editor of choice)] App.js
• add import { Button } from '@mantine/core'

Description

Running this in the browser with:

• npm start
  produces a very long error that originates in the @radixui library starts with:

./node_modules/@radix-ui/react-scroll-area/dist/index.module.js
Module parse failed: C:\Users\usr\myapp\node_modules@radix-ui\react-scroll-area\dist\index.module.js
Unexpected token (1:810)
You may need an appropriate loader to handle this file type.

Expected behavior

Should work without any problems

Actual behavior

Fails at (1:810) which when closely inspected in the editor, we find an attempt to destructure an object:

const {
        __scopeScrollArea: t,
        type: n = "hover",
        scrollHideDelay: i = 600, // This is exactly where the location (1:810) where the error happens inside index.module.js
        ...a
    } = e, [d, p] = s.useState(null), [h, m] = s.useState(null), .... etc;

It's worth mentioning, that after some digging, I figured that the radixui library uses an old version of react (16.0 or 17.0) which seems incompatible with the default react version in the project, but even after changing the version in package.json in the main project directory, the problem persists.