CODEWITHSUNDEEP
node.jsreactjsmaterial-uinext.js
DanielVip3
DanielVip3

Reputation: 337

Material UI multiple Select MenuItem ref error

Lately, I'm getting without a reason this error from opening a multiple Select in React+Next.js using Material UI:

Error: Argument appears to not be a ReactComponent. Keys: retry

This appears to be an error related to a ref. It happens on both the Select I do have on that page and both the select on another one.

This error only happens when I try to open a Select which has MenuItems inside; if it doesn't, it just doesn't happen (the select opens but it's, obviously, empty). And the error never happens if I don't open the Select, it probably happens when trying to render the MenuItems.

const FormControlLabel = dynamic(() => import("@material-ui/core/FormControlLabel"));
const InputLabel = dynamic(() => import('@material-ui/core/InputLabel'));
const MenuItem = dynamic(() => import('@material-ui/core/MenuItem'));

/* Then, in render... */

<FormControl id="selected-genres-wrapper">
    <InputLabel htmlFor="selected-genres-input">Generi</InputLabel>
    <Select
        multiple
        value={this.state.selectedEdited && this.state.selectedEdited.genres ? this.state.selectedEdited.genres : this.state.selected.genres}
        onChange={this.genresSelect}
        input={<FilledInput variant="filled" id="selected-genres-input" />}
        renderValue={selected => (
            <div>
                {selected.map(value => (
                    <Chip key={value} label={value} />
                ))}
            </div>
        )}
    >
        {this.genres.map(name => (
            <MenuItem key={name} value={name}>
                {name}
            </MenuItem>
        ))}
    </Select>
</FormControl>

The error itself just doesn't make sense because it's an internal error with no kind of help to debug or prevent it in any way.

I also tried updating Material UI core (I was using 4.6, now I'm using 4.11) but really nothing changed.

Any idea? Thanks in advance.

Error

Upvotes: 1

Views: 1010

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 81046

The Menu.js line referenced in the stacktrace is code where the Menu is cloning the child MenuItem elements. The error is due to your dynamic import of MenuItem.

If you replace the dynamic import with:

import MenuItem from '@material-ui/core/MenuItem';

it should work fine.

Upvotes: 1

Related Questions