CODEWITHSUNDEEP
reactjsreact-intl
mandy113
mandy113

Reputation: 1

'IntlProvider' cannot be used as a JSX component

I'm currently getting this error

'IntlProvider' cannot be used as a JSX component.
  Its type 'typeof IntlProvider' is not a valid JSX element type.
    Type 'typeof IntlProvider' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.
      Construct signature return types 'IntlProvider' and 'Component<any, any, any>' are incompatible.
        The types returned by 'render()' are incompatible between these types.
          Type 'Element' is not assignable to type 'ReactNode'.
            Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.

Here's my component.

import { ReactNode, useContext } from "react";
import { IntlProvider } from "react-intl";
import flatten from "flat";
import { LocaleContext, LocaleContextType } from "./locale-context-provider";
import { translations } from "./translations";

const TranslationProvider = ({
  children
}: {
  children: ReactNode;
}): JSX.Element => {
  const [locale] = useContext(LocaleContext) as LocaleContextType;
  const messages: Record<string, string> = flatten(translations[locale]);

  return (
    <IntlProvider locale={locale as string} messages={messages}>
      {children}
    </IntlProvider>
  );
};

export default TranslationProvider;

Not sure how to fix this issue

Upvotes: 0

Views: 316

Answers (0)

Related Questions