adobe-cep-react-create
adobe-cep-react-create copied to clipboard
Importing mantine library causes an error
OS: Windows: BROWSER: CHROME: Version 101.0.4951.67 (Official Build) (64-bit)
How to reproduce the error with npm:
in terminal:
- 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.
@yahiaboudah Maybe try updating webpack ?
I ended switching to vite