MantineProvider was not found in component tree error

[AnnMarieW]

Why this error happens:

dmc.MantineProvider wraps children in the @mantine/core context.

If your component is compiled with its own copy of Mantine (from node_modules), it’s asking a different context object.

React treats those contexts as completely separate — so it says MantineProvider was not found.

How to fix:

You need to make sure both dmc and your custom component resolve Mantine from the same place:

1. In your custom component’s package.json, mark Mantine as a peer dependency, not a regular dependency:

{
  "peerDependencies": {
    "@mantine/core": "^8.0.0",
    "@mantine/hooks": "^8.0.0",    
  }
}

This way, it won’t bundle its own copy of Mantine.

2. update webpack.config.js to mark it as external as well:

const externals = {
        react: {
            commonjs: 'react',
            commonjs2: 'react',
            amd: 'react',
            umd: 'react',
            root: 'React',
        },
        'react-dom': {
            commonjs: 'react-dom',
            commonjs2: 'react-dom',
            amd: 'react-dom',
            umd: 'react-dom',
            root: 'ReactDOM',
        },
        '@mantine/core': {
            commonjs: '@mantine/core',
            commonjs2: '@mantine/core',
            amd: '@mantine/core',
            umd: '@mantine/core',
        },
        '@mantine/hooks': {
            commonjs: '@mantine/hooks',
            commonjs2: '@mantine/hooks',
            amd: '@mantine/hooks',
            umd: '@mantine/hooks',
        },
    };

You will see the build size is much much smaller now too:

asset many_select.js 2.91 KiB [emitted] [minimized] (name: main)

[NiklasKappel]

Thank you very much for the explanation. Indeed, marking mantine as peer dependency and external fixes the MantineProvider was not found in component tree error. However, this way I get an error can't access property "useCombobox", a is undefined instead. Only if I don't mark mantine as external, and wrap my component in an additional <MantineProvider> tag, all errors go away and the component renders.

Does that mean that dash-mantine-components does not bundle the useCombobox hook? Looking at the DMC repo (for the 2.1.0 release tag), @mantine/core (where I import useCombobox from) is listed as a dependency, but useCombobox does not seem to be imported anywhere. I guess webpack optimizes unused parts of @matine/core away, so I have to bundle it again?

Edit: This also seems strange to me, as DMC wraps a Mantine MultiSelect that in turn relies on Combobox, and DMC bundles all of Mantine as a regular (not external) requirement. So the Manting combobox code has to somewhere in the DMC, right?