ERROR: mantineProvider was not found in component tree

Get Help and Help Others
1

I’m new to Redwood, just finished the tutorial and exploring…

I’m getting this error in the Storybook, and not sure what is happening…

Please help.

@mantine/core: MantineProvider was not found in component tree, make sure you have it in your app
Error: @mantine/core: MantineProvider was not found in component tree, make sure you have it in your app
    at useMantineTheme (http://localhost:7910/main.iframe.bundle.js:131892:11)
    at http://localhost:7910/main.iframe.bundle.js:130963:130
    at renderWithHooks (http://localhost:7910/main.iframe.bundle.js:90628:18)
    at updateForwardRef (http://localhost:7910/main.iframe.bundle.js:93544:20)
    at beginWork (http://localhost:7910/main.iframe.bundle.js:95954:16)
    at beginWork$1 (http://localhost:7910/main.iframe.bundle.js:101744:14)
    at performUnitOfWork (http://localhost:7910/main.iframe.bundle.js:100875:12)
    at workLoopSync (http://localhost:7910/main.iframe.bundle.js:100784:5)
    at renderRootSync (http://localhost:7910/main.iframe.bundle.js:100752:7)
    at recoverFromConcurrentError (http://localhost:7910/main.iframe.bundle.js:100168:20)
2

Whenever, or whichever the page I use mantine component, it breaks Storybook. But the actual page is not breaking on the app itself.

Please help.

3

Ok, storybook just had to be restarted.

But, now, the style is not taking place in the storybook.

4

This storybook.preview.js works for us:

import * as React from 'react'

import { MantineProvider, createEmotionCache } from '@mantine/core'

import { Toaster } from '@redwoodjs/web/toast'

import { theme } from './mantine.config'

/** @type { import("@storybook/csf").GlobalTypes } */
export const globalTypes = {}

/**
 * An example, no-op storybook decorator. Use a function like this to create decorators.
 * @param { import("@storybook/addons").StoryFn} StoryFn
 * @param { import("@storybook/addons").StoryContext} context
 * @returns StoryFn, unmodified.
 */

export const parameters = {
  backgrounds: {
    default: 'gray',
    values: [
      {
        name: 'gray',
        value: '#f1f3f5',
      },
      {
        name: 'white',
        value: '#fff',
      },
    ],
  },
}

const withMantine = (StoryFn) => {
  const appendCache = createEmotionCache({ key: 'm', prepend: false })
  return (
    <MantineProvider theme={theme} emotionCache={appendCache}>
      <StoryFn />
      <Toaster />
    </MantineProvider>
  )
}

export const decorators = [withMantine]