Tengo un proyecto de reacción "Aplicación" que requiere otro paquete "AppComponents" que a su vez requiere el paquete "UI".

Aplicación (tiene Intlprovider) => AppComponents (useIntl funciona) => UI (useIntl no funciona)

Agregué el proveedor internacional en "Aplicación", y cuando uso el enlace "useIntl" en el paquete "AppComponents", funciona bien. Pero cuando uso ese enlace en el paquete "UI", no funciona y dice que no hay proveedor:

Error no detectado: [React Intl] No se pudo encontrar el objeto intl requerido. debe existir en la ascendencia del componente.

Estoy usando:

reaccionar-intl v6.0.4

reaccionar v18.0.0

nodo v18.0.0

npm v8.6.0

"Aplicación":

 import { useMemo, useState, createContext } from 'react'; import { IntlProvider } from 'react-intl'; import { ReactNode } from 'react'; import { MessageFormatElement } from 'react-intl'; export type TTranslationData = Record<string, string> | Record<string, MessageFormatElement[]>; export interface II18nContext { locale: string; setLocale: (newLocale: string) => void; setTranslation: (data: TTranslationData) => void; } export interface II18nProviderProps { children: ReactNode; } const I18nContext = createContext<II18nContext | null>(null); function I18nProvider({ children }: II18nProviderProps) { const [locale, setLocale] = useState(navigator.language); const [message, setMessage] = useState<TTranslationData | Record<string, never>>({}); const value = useMemo( () => ({ locale, setLocale, setTranslation: (data: TTranslationData) => setMessage(data), }), [locale], ); return ( <I18nContext.Provider value={value}> <IntlProvider locale={locale} messages={message}> <App /> </IntlProvider> </I18nContext.Provider> ); }

Paquete "UI" (no funciona):

 import { useIntl } from 'react-intl'; ... function Searchbar(props: SearchbarProps) { const intl = useIntl(); ... return ( ... {intl.formatMessage({ id: 'searchbar.placeholder', description: 'React UI search bar placeholder', defaultMessage: 'Search', })} ... ); ... }

Cualquier ayuda sería muy apreciada.