False error: MantineProvider was not found in component tree, make sure you have it in your app (reopening with reproduction)

[simonszalai]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.5.3

What package has an issue?

@mantine/notifications

What framework do you use?

Remix

In which browsers you can reproduce the issue?

Chrome

Describe the bug

The issue is described in this previously closed issue. I still have this problem, so I created a reproduction.

The project is pretty much an Epic Stack template. There are many files, but they are not relevant here. I kept all of my dependencies in the package.json file, maybe one of them is causing the issue. Also kept my root.tsx file mostly intact.

The error is the following:

    at useMantineTheme [...]```

Which disappears if I remove <Notifications /> AND <ModalsProvider>. If either of those is included in my JSX, I'm getting this error.

In the original issue there were suggestions about removing node_modules and lockfile, I tried those, they did not help. I'm also not using pnpm, just plain npm.

### If possible, include a link to a codesandbox with a minimal reproduction

_No response_

### Possible fix

_No response_

### Self-service

- [X] I would be willing to implement a fix for this issue

[jgravois]

thats a pretty massive repro case. i don't have the patience to look through all that boilerplate code but generally that error means that you're attempting to render a mantine component somewhere that isn't within <MantineProvider />.

the first thing i'd try if i were you would be to wrap your entire App and ErrorBoundary in it.

https://github.com/simonszalai/mantine_repro/blob/main/app/root.tsx#L169C10-L172

[simonszalai]

I know what the error says and obviously thats the first thing I checked, and the provider is there. The reason I sent a repro so massive because I could not reproduce it in a fresh project, there it worked. Eventually I just started over and moved my code to a new project and got it working, but there is something in here that triggers that error incorrectly.

[leonschwanitz]

One idea is to replace all instances of useMantineTheme() in the code with useMantineSafeTheme(). This would resolve the issue, but it would require users of a monorepo to individually apply styles to components, which could be considered a disadvantage. but that could be done via overriding css variables?.

@rtivital and the others what do you think?

https://mantine.dev/styles/css-variables/

Code here:

mantine/packages/@mantine/core/src/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.tsx

Line 8 in 4c9a875

export const useSafeMantineTheme = () => useContext(MantineThemeContext) || DEFAULT_THEME;

[rtivital]

It is a bad idea that will lead to more frustration.