UserPicker component does not work when it's child of CustomFieldEdit

Here’s my Edit view for the UserPicker custom field

return (
    <CustomFieldEdit onSubmit={onSubmit} width="small" header="Select values">
        <UserPicker label="User" name="user" />

When I open issue’s Create Screen and click on the field nothing happens and there’s one error in the browser logs:

Invariant Violation: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.
    at e.exports (
    at ee (
    at new n (
    at Ra (
    at qi (
    at Rl (
    at ys (
    at hs (
    at ls (

When I remove UserPicker component from the my code, edit field view renders correctly.

Facing the same issue at the moment. I figured that I need to include further up the tree as it is done in the UserPicker example here but unfortunately that did not make a difference for me. Did you find a solution to your problem?

Unfortunately, I’ve not found solution

Thanks for getting back to me @belokurbohdan I just had another look at the problem (fresh eyes in the morning) and I went to check what dependencies the package has. There they specify a particular version of the intl package and after including that I got it to run. So my whole solution looks like this.

in package.json in dependencies I added "react-intl-next": "npm:react-intl@^5.18.1", and did npm install

and my react typescript code looks like this (note you need to provide at least a fieldId into the UserPicker component):

import React from 'react';
import RawUserPicker, {OptionData} from '@atlaskit/user-picker'
import { IntlProvider } from "react-intl-next";

export default function UserPicker(props: any) {
  return (
    <IntlProvider locale="en">
        <RawUserPicker {...props} loadOptions={loadUsers} />
  async function loadUsers(searchText?: string): Promise<OptionData[]> {
    return JiraApi(`/rest/api/3/user/picker?showAvatar=true&query=${searchText}`).then((response:any) =>
      (response.body as UserPickerSearchResponse) => ({
        id: user.accountId,
  interface UserPickerSearchResponse {
    users: User[];
    total: number;
    header: string;
  interface User {
    accountId: string;
    accountType: string;
    name: string;
    key: string;
    html: string;
    displayName: string;
    avatarUrl: string;

Adjust the code and your JiraApi function to either AP.request or api.asUser().requestJira depending on what platform you are on and change the data retrieval accordingly! But this worked for me


Hi @MichaelIlewicz
Thank you a lot for your response. :slightly_smiling_face:

Few month later I used this approach for making a userpicker

 - key: user-example-cf
      name: user example customfield type
      type: user
        expression: value != null
        errorMessage: Please, select user

This wasn’t documented feature, but now it’s officially released (see Extend Forge Custom Field Type types )