Обновление response-intl v4 `IntlProvider` не обнаружено, предотвращая отображение компонента при использовании оболочки` injectIntl` - PullRequest
Новая
       52

Обновление response-intl v4 `IntlProvider` не обнаружено, предотвращая отображение компонента при использовании оболочки` injectIntl`

0 голосов
/ 08 мая 2020

Я пытаюсь обновить response-intl v 2.3.0 до 4.5.1. После обновления у меня возникло несколько проблем с injectIntl HO C. У меня есть библиотека общих компонентов в монорепозитории, которая импортируется в разные функции (сочетание импортированных общих и локальных уникальных компонентов в отдельной части репозитория). Однако мой IntlProvider живет в моей библиотеке общих компонентов, и мы импортируем компонент с именем AppShell, который включает в себя всех необходимых поставщиков (включая intl), которые охватывают верхний уровень каждой функции.

Я последовал совету, найденному на проблема с репозиторием формата js и удалена версия response-intl из моей библиотеки общих компонентов. Это решило большинство моих проблем с некоторыми оговорками.

Обратите внимание: во всех приведенных ниже примерах используется папка функций с response-intl версии 4.5.1 и общая библиотека компонентов без установленной версии react-intl

Попытка исправления 1

Если я попытаюсь использовать injectIntl HO C из react-intl, компонент не будет отображаться на странице, и я получаю следующие ошибки: enter image description here

enter image description here

пример кода (компонент оболочки AppShell находится на верхнем уровне ReactDOM.render функция): 

import { FormattedMessage, injectIntl } from 'react-intl';

// shared component library
import { Alert } from '@shared/components/alert';
// component custom to feature, also can contain shared components
import WorkspaceListContainer from './workspaceListContainer';
import messages from './messages';

export class AppLifecycleMenu extends Component {
  render() {
    const deleteAlertTitle = this.props.intl.formatMessage(
      messages.deleteAlertTitle,
      { alertName: name }
    );

    return (
        <Fragment>
            <WorkspaceListContainer />
            <Alert
                title={deleteAlertTitle}
                okButtonText={<FormattedMessage {...messages.deleteOkButton} />}
                cancelButtonText={<FormattedMessage {...messages.deleteCancelButton} />}
            />
      </Fragment>
    );
  }
}

export default injectIntl(AppLifecycleMenu);

Обратите внимание, что во многих наших общих компонентах , intl сообщения могут быть переданы как свойства, а некоторые компоненты обернуты в свои собственные injectIntl HO C в intl версии свойств по умолчанию (например, метка кнопки по умолчанию).

Попытка исправления 2

Однако, если я импортирую хелпер injectIntl, который есть в нашей библиотеке общих ресурсов, компонент отображается, но по-прежнему отображает сообщение об ошибке:

injectIntlHelper code: 

// only apply intl in non-test environments
export  default  Component  => process.env.NODE_ENV  ===  TEST_ENV  ?  Component  :  injectIntl(Component);

пример кода (компонент оболочки AppShell находится на верхнем уровне ReactDOM.render function): 

import { FormattedMessage, injectIntl } from 'react-intl';

// shared component library
import { Alert } from '@shared/components/alert';
import injectIntl from '@shared/utilities/injectIntl';
// component custom to feature, also can contain shared components
import WorkspaceListContainer from './workspaceListContainer';
import messages from './messages';

export class DeleteWorkspaceAlert extends Component {
  render() {
    const deleteAlertTitle = this.props.intl.formatMessage(
      messages.deleteAlertTitle,
      { alertName: name }
    );

    return (
        <Fragment>
            <WorkspaceListContainer />
            <Alert
                title={deleteAlertTitle}
                okButtonText={<FormattedMessage {...messages.deleteOkButton} />}
                cancelButtonText={<FormattedMessage {...messages.deleteCancelButton} />}
            />
      </Fragment>
    );
  }
}

export default injectIntl(AppLifecycleMenu);

дерево компонентов с intlprovider: enter image description here

Сообщение об ошибке: enter image description here

Попытка исправления 3

Я также пытался установить только react-intl в библиотеке общих ресурсов, но это привело к следующему сообщению об ошибке: enter image description here

Environment

Я пробовал использовать более низкие версии в response-intl, но эта проблема сохраняется до версий 3.0 и выше.

Я пробовал разные комбинации и несколько дней смотрел в Интернете, есть ли какие изменения я могу внести, чтобы избавиться от этих ошибок? Что-то выскакивает из-за того, что мне не хватает добавления или обновления между версиями?

1 Ответ

0 голосов
/ 08 мая 2020

Для всех, кто сталкивается с этим, моя проблема была решена путем изменения / изменения исправления из проблемы: https://github.com/formatjs/formatjs/issues/1620

В отличие от проблемы, указанной выше, мои проекты IntlProvider живет в библиотеке общих ресурсов и экспортируется в компоненты оболочки. Поэтому я удалил зависимость react-intl из всех папок, кроме моей библиотеки общих ресурсов, и экспортировал оттуда все необходимые компоненты.

Таким образом, мой импорт в моей папке с необщими компонентами будет выглядеть как 

import injectIntl, { FormattedMessage, FormattedDate } from '@shared/utils/intl';

с компонентами в моей общей библиотеке, в которых есть файлы, которые выглядят следующим образом 

import { FormattedMessage } from 'react-intl;
export FormattedMessage;

Соответствующая цитата из проблемы:

Я думаю, что причина [наличия нескольких зависимостей], работавшая со старой версией, - это старый API контекста React. Новый API контекста React полагается на ту же ссылку. Вы проектируете экземпляры контекста реакции из разных node_modules, поэтому контексты не являются одной и той же ссылкой. Это также означает, что вы дважды связываете response-intl в своем приложении.

...