mantine: False error: MantineProvider was not found in component tree, make sure you have it in your app

The issue is not related to @mantine/* packages – they work as intended. If you think that the error is with dependencies resolution, you can open an issue in your package manager repository.

For everyone who meet this problem:

in my next.config.js the experimental property was added like that:

experimental: {
        optimizePackageImports: [
            '@mantine/core',
            '@mantine/hooks'
        ],
}

I’ve deleted it and now it works!

In my case, I had a monorepo and had different versions of mantine/core installed in different projects. Updated and it started working fine

FIXED

To fix this I basically had to delete all node_modules folders and also the pnpm-lock file. When I reinstalled everything it started working. So just be careful when updating to v7 from v6 if you work in a pnpm monorepo.

I also get this issue and I also am working in a pnpm monorepo. This happened when upgrading from v6 to v7.2.2. If I remove the <Notifications /> component from the app then everything loads fine.

I am using vite-react (not Nextjs).

export default function AppProviders({ children }: AppProviderProps) {
  const queryClient = new QueryClient();

  return (
    <MantineProvider theme={{ ...theme }} defaultColorScheme="light">
      <Notifications />
      <QueryClientProvider client={queryClient}>
        {children}
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </MantineProvider>
  );
}

What version of @mantine/* packages do you have in package.json? (Note that all @mantine/* packages must have the same version in order to work correctly)

7.2.2

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

No codesandbox as would require setting up a monorepo

Do you know how to fix the issue No

Do you want to send a pull request with a fix? No

Got this working for our team, turns out this was actually a peer deps issue. We have a front end monorepo with multiple apps and are in the process of adding an additional vite + react app using pnpm.

We had multiple @types/react versions defined for different apps and packages. Mantine/core however, was pinned at the root and used as a peer dep everywhere. So if one app had a different @types/react version defined, it would create a duplicate @mantine/core with these additional deps in the lockfile as react/types is also a peer dep of mantine.

Summary of problem: Having mantine/core defined as a peer dep everywhere will cause different variations if all apps and packages are not aligned across the border with the peers of mantine/core (react, react-dom, @types/react(transitive))

Fixed by:

1. Moving @types/react to the root package.json
2. Made @types/react a peer dep for all consuming apps and packages
3. Deleted the pnpm-lockfile
4. Re ran install and this removed the duplicate mantine/core flavors

Hope this helps someone from the days of spinning! 🙏

Thanks @rtivital , but I found that article before and unfortunately none of those solve my issue. I think it could be some weird caching thing, because it used to work and at one point without apparent reason it broke. First I was getting this error only when I used Notifications, but now also with Modals. All mantine packages have the same version, tried deleting node_modules, package-lock.json and also cleared npm cache, none of those helped.

Might be a clue that if I comment out the component that is causing the error and refresh the page, the error stays until I clear Chrome cache

You are welcome to open a new issue if you can provide a minimal reproduction. Issues that cannot be reproduced are closed as incomplete.

@rtivital I’m still facing this issue, I have created a repo with minimal reproduction. Should I open a new issue since this one is closed?

The readme is explaining everything… I suppose.

Let me know if you have any questions. Hopefully it’s something I messed up and can be easily solved!

There is so many people having the same bugs that it can’t be just a “problem” on our side. I check in my bundled lib folder and there is only one @mantine/core package existing. I check in the app that using my lib and same behaviour.

FWIW the error still exists with a new Next project using pages router. The error remains while using any of the plugins (Notifications, Modals, etc) and removing them from the _app.tsx file renders the default page.

Installed packages are:

    "@mantine/charts": "7.8.1",
    "@mantine/code-highlight": "7.8.1",
    "@mantine/core": "7.8.1",
    "@mantine/dates": "7.8.1",
    "@mantine/dropzone": "7.8.1",
    "@mantine/form": "7.8.1",
    "@mantine/hooks": "7.8.1",
    "@mantine/modals": "7.8.1",
    "@mantine/notifications": "7.8.1",
    "@mantine/nprogress": "7.8.1",
    "@mantine/spotlight": "7.8.1",
    "@mantine/tiptap": "7.8.1",

Got this working for our team, turns out this was actually a peer deps issue. We have a front end monorepo with multiple apps and are in the process of adding an additional vite + react app using pnpm.

We had multiple @types/react versions defined for different apps and packages. Mantine/core however, was pinned at the root and used as a peer dep everywhere. So if one app had a different @types/react version defined, it would create a duplicate @mantine/core with these additional deps in the lockfile as react/types is also a peer dep of mantine.

Summary of problem: Having mantine/core defined as a peer dep everywhere will cause different variations if all apps and packages are not aligned across the border with the peers of mantine/core (react, react-dom, @types/react(transitive))

Fixed by:

1. Moving @types/react to the root package.json
2. Made @types/react a peer dep for all consuming apps and packages
3. Deleted the pnpm-lockfile
4. Re ran install and this removed the duplicate mantine/core flavors

Hope this helps someone from the days of spinning! 🙏

Hi, Thank you, it’s helps ! I finally succeed to make it works 🙏🏻

In my case, I had a monorepo and had different versions of mantine/core installed in different projects. Updated and it started working fine

In my case it’s a bundled react lib with package.json:

  "dependencies": {
    "@mantine/core": "^7.6.1",
    "@mantine/form": "^7.6.1",
    "@mantine/hooks": "^7.6.1",
    "@mantine/modals": "^7.6.1",
    "@mantine/notifications": "^7.6.1"
}

When I install the lib in my project yarn automatically install mantine/* packages. In this project i don’t install mantine as deps, dev deps or anything. Mantine is coming from my lib.

Issue exists still and none of the fixes work, facing issues even with basic cypress setup

1 failing

1. App mounts app component: Error: The following error originated from your application code, not from Cypress.

   @mantine/core: MantineProvider was not found in component tree, make sure you have it in your app

https://help.mantine.dev/q/mantine-provider-missing

I got it resolved by removing the pnpm-lock.yaml and running pnpm install again in my pnpm monorepo.

I had the same issue suddenly appear in my project. I tried to reproduce the issue in codesandbox, but wasn’t able so I looked at what I did that might have broken it in my project.

I use pnpm monorepo and introduced a new app that uses mantine. When I removed the new app, everything worked as expected. So I think it is something with the external dependency resolving. Will look further into it tomorrow.