[BUG] - Element type is invalid

[neutron92]

Description

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Reproduction URL

kkk

Reproduction steps

when i delete this it works and when i put it i got this error i'm struggling with custom inputs



'use client';
import React, { useEffect, useState } from 'react';
import * as Icons from '@egashop/icons/icons';
import Icon, { IconsType } from '@egashop/icons';
import {
  Select,
  SelectItem,
  SelectContent,
  SelectValue,
  SelectTrigger,
  BaseInput,
} from '@premieroctet/next-admin/components';

export default function CategoryIconInput(props) {
  const iconKeys = Object.keys(Icons) as Array<keyof typeof Icons>;
  const { onChange, value } = props;
  const [selectedIcon, setSelectedIcon] = useState<string>(
    value || iconKeys[0]
  );
  const [search, setSearch] = useState('');

  const filteredIcons = iconKeys.filter((ik) =>
    ik.toLowerCase().includes(search.toLowerCase())
  );

  useEffect(() => {
    if (onChange && selectedIcon) {
      onChange({
        target: { value: selectedIcon },
      });
    }
  }, [selectedIcon, onChange]);

  return (
    <div className="flex items-center gap-3">
      <Select
        {...props}
        name="icon"
        value={selectedIcon}
        defaultValue={selectedIcon}
        onValueChange={(v) => {
          setSelectedIcon(v as string);
          onChange?.({
            target: { value: v },
          });
        }}
      >
        <SelectTrigger className="p-2 border rounded">
          <SelectValue placeholder="Select an icon" />
        </SelectTrigger>
        <SelectContent className="p-2 bg-white border shadow-md">
          <BaseInput
            type="text"
            placeholder="Search..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-full p-2 mb-2 border rounded"
          />
          <div className="overflow-y-auto max-h-60">
            {filteredIcons.length > 0 ? (
              filteredIcons.map((ik) => (
                <SelectItem key={ik} value={ik}>
                  {ik}
                </SelectItem>
              ))
            ) : (
              <p className="text-center text-gray-500">No results found</p>
            )}
          </div>
        </SelectContent>
      </Select>

      {selectedIcon && <Icon name={selectedIcon as IconsType} />}
    </div>
  );
}

export function CategorySelected({ value }: { value: string }) {
  return <Icon name={value as IconsType} />;
}

Next router

App router

Next Admin version

8.3.0

Screenshots

Next Admin options

icon: {
            required: true,
            input: <CategoryIconInput />,
          },

Logs

Browsers

Chrome

[foyarash]

Hello

Thanks for the report. We currently don't really have time to take care of this but we would gladly accept any PR that would fix this

[neutron92]

Is there any workaround?

[foyarash]

The only current workaround would be to go back to an older version of Next. Sorry about that

[foyarash]

Hello @neutron92 , sorry for the delay. I found a way to solve this and created a PR that should fix this.

It should be deployed very soon

[foyarash]

@neutron92 could you try 8.4.0 please ?

[neutron92]

works good thank you