TypeError: (0 , _mantine_core__WEBPACK_IMPORTED_MODULE_0__.rem) is not a function next.js Dropzone

Question

I have a problem rendering a dropzone with next.js and mantine. https://mantine.dev/others/dropzone/

import:

dropzone

error message

this is an code example of my problem https://codesandbox.io/s/mantine-forked-kixzh7?file=/src/App.tsx

Maybe it's a problem with my node version? Currently, I use node 18.14.2

Answer 1

In my case, the error was like this when I tried to use Burger from mantine/core:

TypeError: (0 , mantine_hooks__WEBPACK_IMPORTED_MODULE_1_.useDisclosure) is not a function or its return value is not iterable

I added "use client" to the component's file and error disappeared.

Answer 2

The problem is being caused by nonmatching version of "@mantine/core" and "@mantine/dropzone".

Your package.json most likely looks like this.

...
"@mantine/core": "^5.9.4",
"@mantine/dates": "^5.9.4",
"@mantine/dropzone": "^6.0.1",
"@mantine/form": "^5.9.4",
"@mantine/hooks": "^5.9.4",
...

To fix the error, please go to your package.json, change the the "@mantine/dropdown"'s version to match the other package's version number then run npm install or yarn install