Hi there,
I recently updated the @atlaskit/user-picker and noticed that the required dependency react-intl-next (react-intl-next - npm) was removed. Switching to react-intl (react-intl - npm) does not work.
Still I get the following errors: Error: [React Intl] Could not find required intl object. <IntlProvider> needs to exist in the component ancestry.
This is what my Component looks like
import React, {useContext, useState} from "react";
import {IntlProvider} from "react-intl"; // was react-intl-next before
import AtlUserPicker, {Value} from "@atlaskit/user-picker";
import {AtlassianContext} from "@/AtlassianContext";
import {useAsyncFn, useDebounce} from "react-use";
import {MultiUserFieldTypeValue} from "types/cf-multi-user-types";
import {mapUserFieldDataToOption} from "./multi-user-mapper";
import {findAssignableUsers} from "./multi-user-api";
import {useTranslation} from "react-i18next";
interface Props {
defaultValue?: MultiUserFieldTypeValue;
onChange: (value: Value) => void;
}
export function UserPicker({defaultValue, onChange}: Props) {
const {t} = useTranslation();
const [searchInput, setSearchInput] = useState("");
const [{value, loading}, searchFunction] = useAsyncFn(
// API call
), [searchInput]);
useDebounce(searchFunction, 1000, [searchInput]);
return <IntlProvider locale="en">
<AtlUserPicker
width="100%"
placeholder={t("multi-user-edit.user-picker.placeholder")}
addMoreMessage={t("multi-user-edit.user-picker.add-more")}
defaultValue={defaultValue?.users.map(mapUserFieldDataToOption)}
options={value}
isLoading={loading}
onInputChange={(query) => setSearchInput(query ?? "")}
isMulti
fieldId="user-picker"
onChange={onChange}
/>
</IntlProvider>;
}