How to resolve this TypeScript lint error?

Question

I am implementing Fluent UI in Next.js according to the documentation on this page.

The problem is that when I try to build the application, it returns the following errors:

Type '{ children: Element; renderer: any; }' is not assignable to type 'IntrinsicAttributes & RendererProviderProps'.

Property 'children' does not exist on type 'IntrinsicAttributes & RendererProviderProps'

import {
  createDOMRenderer,
  RendererProvider,
  SSRProvider,
  FluentProvider,
  webLightTheme
} from '@fluentui/react-components'
import '../styles/styles.css'


function MyApp({ Component, pageProps, renderer }) {
  return (
      <RendererProvider renderer={renderer || createDOMRenderer()}>
        <SSRProvider>
          <FluentProvider theme={webLightTheme}>
            <Component {...pageProps} />
          </FluentProvider>
        </SSRProvider>
      </RendererProvider>
  )
}

export default MyApp

strong text

Answer 1

I had the same problem. The problem is a type issue in the FluentUI library.

In my case I'm using GatsbyJS, Here's my workaround while we wait for the FluentUI team to fix the issue.

import {
  createDOMRenderer,
  RendererProvider,
  SSRProvider,
  FluentProvider,
  webLightTheme
} from '@fluentui/react-components'
import '../styles/styles.css'


function MyApp({ Component, pageProps, renderer }) {
  const ssrProps: any = {
    children: <FluentProvider theme={webLightTheme}><Component {...pageProps} /></FluentProvider>,
  };

  return (
      <RendererProvider renderer={renderer || createDOMRenderer()}>
        <SSRProvider {...ssrProps} />
      </RendererProvider>
  )
}

export default MyApp

Pay attention to ssrProps, that variable will do the trick for now