marmelab/react-admin · error · Error

emptyValue being set to null or undefined is not supported.

Error message

emptyValue being set to null or undefined is not supported. Use parse to turn the empty string into null.

What it means

SelectInput treats its empty option value specially: it must be a non-null value (typically the empty string '') so it can distinguish 'no selection' from an actual null choice. Passing emptyValue={null} or leaving it undefined when a custom empty value was intended is unsupported — the library tells you to use `parse` to convert '' to null instead, inside a useEffect check.

Source

Thrown at packages/ra-ui-materialui/src/input/SelectInput.tsx:152

        label,
        margin = 'dense',
        onBlur,
        onChange,
        onCreate,
        optionText,
        optionValue,
        parse,
        resource: resourceProp,
        source: sourceProp,
        translateChoice,
        validate,
        ...rest
    } = props;
    const translate = useTranslate();

    useEffect(() => {
        if (emptyValue == null) {
            throw new Error(
                `emptyValue being set to null or undefined is not supported. Use parse to turn the empty string into null.`
            );
        }
    }, [emptyValue]);

    const {
        allChoices,
        isPending,
        error: fetchError,
        source,
        resource,
        isFromReference,
    } = useChoicesContext({
        choices: choicesProp,
        isLoading: isLoadingProp,
        isFetching: isFetchingProp,
        isPending: isPendingProp,
        resource: resourceProp,

View on GitHub (pinned to 051f511bb0)

Solutions

Remove emptyValue (the default '' is used) and add `parse={v => v === '' ? null : v}` if the form value should be null.
Set emptyValue to a concrete non-null sentinel such as '' or a string like 'none'.

Example fix

// before
<SelectInput source="category" choices={choices} emptyValue={null} />

// after
<SelectInput
  source="category"
  choices={choices}
  parse={value => (value === '' ? null : value)}
/>

Defensive patterns

Strategy: validation

Validate before calling

if (emptyValue === null || emptyValue === undefined) {
  throw new Error('emptyValue must be non-null; use parse to map "" to null');
}

Type guard

const isValidEmptyValue = (v: unknown): v is string | number | boolean =>
  v !== null && v !== undefined;

Prevention

Never pass null/undefined as emptyValue
Use parse={value => value === '' ? null : value} to submit null to the API
If emptyValue comes from config, validate it at load time

When it happens

Trigger: Rendering <SelectInput ... emptyValue={null} /> or explicitly setting emptyValue={undefined}. The check runs in a useEffect, so it fires after the first render whenever emptyValue == null.

Common situations: Developers trying to make the 'no selection' option submit null to the API; wiring emptyValue from a variable that is null at runtime; misunderstanding that emptyText/emptyValue default handling already provides ''.

Related errors

AI-assisted analysis of marmelab/react-admin@051f511bb0 (2026-08-30). Data as JSON: /api/errors/aae69ac7f25cc0bc. Report an issue: GitHub.