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

1 Like

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 )