Skip to content

Error of "propType portalContainer is invalid" #397

@douglasrcjames

Description

@douglasrcjames

I started using this library with my Next.js ^13.5.1 project recently and started running into the below error of propType portalContainer is invalid, a value I am not manipulating! It doesnt seem to be effecting the actual usage of the component, but is an annoying, long warning error! The component it sits within is flagged with "use client" so it isn't because it sits on the server. Any ideas?
image

I am also using styled-components and react-hook-form, here's my below usage of the components:
React Hook form

        <Controller
                name={fieldKey}
                control={control}
                render={({ field }) => {
                    return (
                        <TimestampPicker
                            disabled={disabled}
                            calendarType={"gregory"}
                            minDate={allowPrevDates ? null : new Date()}
                            onChange={(date: any) => field.onChange(date ? new Date(date) : null)}
                            $error={errors[fieldKey]}
                            value={field?.value ? new Date(field.value) : null}
                        />
                    )
                }}
            />

Styled component

export const TimestampPicker = styled(DateTimePicker)<MTStyledProps>`
    .react-datetime-picker__wrapper {
        ${BodyFont};
        padding: 10px;
        background: white;
        border: 1px solid black;
        border-radius: 2px;
        box-shadow: 0 0 2pt 1pt ${props => props.$error ? onlyTheme.color.red : "none"};
        -webkit-box-shadow: 0 0 2pt 1pt ${props => props.$error ? onlyTheme.color.red : "none"};
        -moz-box-shadow: 0 0 2pt 1pt ${props => props.$error ? onlyTheme.color.red : "none"};  
    }
    
    .react-datetime-picker__calendar {
        /* empty */
    }

    .react-datetime-picker__inputGroup {
        input {
            ${BodyFont};
            color: black;
        }
    }

    .react-datetime-picker__inputGroup__amPm {
        ${BodyFont};
        color: black;
    }

    .react-calendar__navigation__label__labelText {
        ${BodyFont};
        color: black;
    }

    abbr {
        ${BodyFont};
        color: black;
    }

    .react-datetime-picker__inputGroup__divider, .react-datetime-picker__inputGroup__leadingZero {
        ${BodyFont};
        color: black;
    }

    .react-datetime-picker__calendar--open,
    .react-datetime-picker__calendar--closed,
    .react-datetime-picker__clock--open,
    .react-datetime-picker__clock--closed {
        position: absolute;
    }
`;

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions