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

[simonszalai]

Dependencies check up

• [X] 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.

[Vurmevska]

I can reproduce this one on a freshly created project when trying to start storybook with mantine.

[robert-j-webb]

Hey i made a much smaller Repro case: https://github.com/mantinedev/mantine/issues/5898

Sorry I didn't see this issue before I made my own issue 😓

[reboottime]

I had the same issue and resolved it by installing @emotion/react manually.

Context:

• Package versions

    "@mantine/core": "^7.7.1",
    "@mantine/form": "^7.7.1",
    "@mantine/hooks": "^7.7.1",
    "@mantine/modals": "^7.7.1",
    "@mantine/notifications": "^7.7.1",
    "@mantine/styles": "^6.0.21",

• I'm using turbo build mono repo

[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: https://github.com/mantinedev/mantine/blob/4c9a875a823daf8132c034e62f247a6960c84b93/packages/%40mantine/core/src/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.tsx#L8

[rtivital]

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

[DenisBessa]

I also have this problem with Next.js 14. I'm 100% sure that every single bit of my app is wrapped under MantineProvider, and this error shows up in Sentry from time to time.

[DenisBessa]

I finally found the issue. I was using Mantine Components inside the global-error.js file of Next.js. Since the global-error.js file is rendered above the app, the MantineProvider was not present, leading to the error. Adding the MantineProvider to it fixed the issue.

[evolfo]

I finally found the issue. I was using Mantine Components inside the global-error.js file of Next.js. Since the global-error.js file is rendered above the app, the MantineProvider was not present, leading to the error. Adding the MantineProvider to it fixed the issue.

Do you have any more details about how you were able to fix this? Where was your global-error.js file located?

[DenisBessa]

The global-error.js should be inside app directory (see docs here).

The docs say:

global-error.js replaces the root layout.js when active and so must define its own and tags.

So, if it replaces layout.js, it will replace the MantineProvider as well. If you use Mantine Components in your global-error.js, then it will lead to the error.

[jkhaui]

I didn't realise there was another open issue for this - resharing my findings for visibility: https://github.com/mantinedev/mantine/issues/5306#issuecomment-2211624818

Please chime in if anyone understands peer dependencies well; specifically, how npm now handles them, and how to override transitive peer dependency versions such that only a single version of react exists within a project's dependency graph

[mattkindy]

Strangely enough, my use of @mantinex/dev-icons triggered this most recently. Removing them solved my problem, although I can't understand why.

I pulled in the same code from the current version of @mantinex/dev-icons, and everything was fine. I'm using Remix (classic, v2), and this is rendering out of an Outlet, while the provider is at the root. However, even adding another MantineProvider at the same level doesn't help. This points to some sort of build issue somewhere, but still not sure where. I'm going to see if I can come up with a minimal repro to track down what might be happening, in case that helps other people.

Edit: I'm not using pnpm, but I am using npm workspaces. However, the workspace in question is the only one using mantine.

[LQR471814]

Adding this for anyone who uses pnpm. This can happen when you link a package that also uses @mantine/core using something like:

"dependencies": {
  "package": "link:./path/to/pkg"
}

I'm not sure why this happens, it probably has something to do with pnpm, but if you include the package path in pnpm-workspace.yaml it will fix the issue:

//pnpm-workspace.yaml
packages:
  - ./path/to/pkg