#Using Mantine components in a shared npm package across projects and Storybook?

11 messages · Page 1 of 1 (latest)

tawny veldt
#

For example, I've implemented a slightly modified custom Avatar component using Mantine components (like MantineAvatar and ThemeIcon) and packaged it into a shared npm package. When I try to use this component in my Next.js project, I'm getting this error:
"@mantine/core: MantineProvider was not found in component tree, make sure you have it in your app"
This happens despite having MantineProvider at the root layout of my application. However, when I use Mantine components directly (without the wrapper from my shared package), everything works fine.
What's the proper way to structure components in a shared package that depend on Mantine's context, so they can be used seamlessly across projects and in Storybook without requiring additional provider wrappers in each usage location?

quick realization:https://jsfiddle.net/fdxb92vg/

Create and export customizable avatar component - JSFiddle - Code P...

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

dim scarab
twin terrace
#

@tawny veldt Did you fix it?

#

@dim scarab i have the same problem and im using rollup as module bundler is there a way to do it?

dim scarab
twin terrace
#

@dim scarab tried to do it

../package/dist/.mjs
Module not found: Can't resolve '@mantine/core'

#

this shows as an error when building my app

#

despite having mantine/core as peer dependencies

fluid plank
#

this may still indicate you have multiple versions (or even the same version loaded twice) floating around despite the error sounding like it can't find it at all

loud forum
#

@dim scarab
added it as peer dependency ,
it builds successfully
but got an error on start
ReferenceError: window is not defined
ReferenceError: __dirname is not defined

it seems window is used in mantine
is there any solution ?

ornate topaz