adobe-cep-react-create icon indicating copy to clipboard operation
adobe-cep-react-create copied to clipboard

Importing mantine library causes an error

Open yahiaboudah opened this issue 3 years ago • 2 comments

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 avatar May 25 '22 10:05 yahiaboudah

@yahiaboudah Maybe try updating webpack ?

HendrixString avatar Sep 04 '22 20:09 HendrixString

I ended switching to vite

yahiaboudah avatar Sep 05 '22 07:09 yahiaboudah