Remix epic stack app: MantineProvider was not found in component tree

[sid374]

I'm running a Remix.run epic stack app with Mantine v7.

I have verified that I have MantineProvider initiated in my root route, and all my other vanilla Mantine components are getting styled and rendered correctly. However when I try to use the "Getting Started" example of mantine data table - it gives me this exception:

Error: @mantine/core: MantineProvider was not found in component tree, make sure you have it in your app
    at useMantineTheme (file:///Users/sidbidasaria/code/vectro/vectro-remix/node_modules/@mantine/core/src/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.tsx:9:11)
    at file:///Users/sidbidasaria/code/vectro/vectro-remix/node_modules/@mantine/core/src/core/Box/Box.tsx:72:19
    at renderWithHooks (/Users/sidbidasaria/code/vectro/vectro-remix/node_modules/react-dom/cjs/react-dom-server.node.development.js:10:130591)
    at renderForwardRef (/Users/sidbidasaria/code/vectro/vectro-remix/node_modules/react-dom/cjs/react-dom-server.node.development.js:10:136434)
    at renderElement (/Users/sidbidasaria/code/vectro/vectro-remix/node_modules/react-dom/cjs/react-dom-server.node.development.js:10:139812)
    at renderNodeDestructiveImpl (/Users/sidbidasaria/code/vectro/vectro-remix/node_modules/react-dom/cjs/react-dom-server.node.development.js:10:141963)
    at renderNodeDestructive (/Users/sidbidasaria/code/vectro/vectro-remix/node_modules/react-dom/cjs/react-dom-server.node.development.js:10:141404)
    at renderIndeterminateComponent (/Users/sidbidasaria/code/vectro/vectro-remix/node_modules/react-dom/cjs/react-dom-server.node.development.js:10:134827)
    at renderElement (/Users/sidbidasaria/code/vectro/vectro-remix/node_modules/react-dom/cjs/react-dom-server.node.development.js:10:139023)
    at renderNodeDestructiveImpl (/Users/sidbidasaria/code/vectro/vectro-remix/node_modules/react-dom/cjs/react-dom-server.node.development.js:10:141963)

I also tried using useMantineTheme() manually in my component and printing out the theme, and that works just fine too. Here's a snippet of my component:

export function GettingStartedExample() {
	const theme = useMantineTheme()

	console.log('theme = ', theme)
	const companies = [
		{
			id: '1323addd-a4ac-4dd2-8de2-6f934969a0f1',
			name: 'Feest, Bogan and Herzog',
			streetAddress: '21716 Ratke Drive',
			city: 'Stromanport',
			state: 'WY',
			missionStatement: 'Innovate bricks-and-clicks metrics.',
		},
	]
	return (
		<div>
			<div>
				<h1>Woohoo</h1>
			</div>
			<DataTable
				columns={[
					{ accessor: 'name' },
					{ accessor: 'streetAddress' },
					{ accessor: 'city' },
					{ accessor: 'state' },
				]}
				records={companies}
			/>
		</div>
	)
}

Other info

• I've also got Tailwind installed
• I tried following the style guide here however the only way I can get Mantine styles to render in my project by directly importing import '@mantine/core/styles.css'. When I tried the layered approach the styles were not applied to all my other mantine components and I also got the same error on the mantine data table.

I'm fairly new to the react/javascript world, and I tried my best to debug this. But I'm at a loss now, and not sure how to get to the bottom of this. Any help would be appreciated!

[icflorescu]

I haven't got a chance to test it in a Remix app, so I'd like to get more feedback from people using it with Remix.
This looks like somehow, the application spins up two different instances of Mantine, which obviously shouldn't happen.
Can you please test with the latest versions of Mantine & Mantine DataTable, and if the problem persists, come up with a minimal reproduction (codesandbox, GitHub repo or something similar)?

Thanks!

[KevinVandy]

This is also happening in Mantine React Table (MRT) v2 alphas. But we only see it when Mantine releases a v7.x.0 version. As soon as a v7.x.1 patch is released, the error goes away. It's been the most head-scratching error I've ever seen. It's like some peer dependency is incorrect or something, and it results in multiple versions of Mantine being installed and running somehow. There are other potential causes for this error too, but this has been the weirdest and most frustrating.

[icflorescu]

I have finally managed to test this in a simple Remix application and everything works as expected, so I cannot reproduce the error. @sid374 - can you please test with the latest versions of Mantine & Mantine DataTable, and if the problem persists, come up with a minimal reproduction (codesandbox, GitHub repo or something similar)?

Thanks!

[Yunfei1982]

use next js 14.1 and turborepo, same issues.

[KevinVandy]

I solved this in MRT with even more fiddling with the exports field in the package.json to make sure their were different typings specified for esm and cjs. Needed cts and mts extensions

[NewbiZ]

In case that helps anyone stumbling here, I had the same symptoms when I incorrectly installed mantine-datatable globally instead of in my project (didn't notice I was not in my project directory when running npm i).
The issue disappeared once I properly installed mantine-datatable in my project.

[icflorescu]

I was unable to reproduce it, so I'm going to close this for now. Please feel free to reopen (preferably with a reproduction) if you bump into it again.