SyntaxError: Cannot use import statement outside a module in NextJs when calling a component

I am encountering the following error

'SyntaxError: Cannot use import statement outside a module'

when trying to call this TypeScript using NextJS component. This error happened while generating the page. Any console logs will be displayed in the terminal window, however when I comment the component call save a refesh and then de-comment it everything goes well.

interface DrpMenuProps {  cardId: number;}const DrpMenu: React.FC<DrpMenuProps> = ({ cardId }) => {  const [selected, setSelected] = useState<string>("");  const handleDelete = async () => {    try {      await deleteCategory(cardId);      setSelected("");    } catch (error) {      console.error("Error deleting category:", error);    }  };  return (<Box><Menu        placement="left"        trigger={({ ...triggerProps }) => {          return (<Button {...triggerProps} bgColor="transparent" h={28}><Icon as={MoreVertical} color="#0066FF" mr={0}/></Button>          );        }}        selectionMode="single"        onSelectionChange={(keys: any) => {          setSelected(keys.currentKey);        }}><MenuItem key="Edit" textValue="Edit"><Icon as={Pencil} size="sm" mr="$2" /><MenuItemLabel size="sm">Editar</MenuItemLabel></MenuItem><MenuItem key="Delete" textValue="Delete"><Icon as={Trash2} size="sm" mr="$2" color="red" /><MenuItemLabel size="sm" color="red">            Eliminar</MenuItemLabel></MenuItem></Menu><ModalComponent        showModal={selected === "Edit"}        onClose={() => {          setSelected("");        }}        modalTitle="Editar categoría"><FormControl><VStack space="xl" display="flex"><VStack space="xs"><Input borderRadius="$full"><InputField                  placeholder="Nombre de categoría"                  fontFamily="Montserrat"                  fontSize={15}                /></Input></VStack><VStack alignItems="center"><BlueButton/></VStack></VStack></FormControl></ModalComponent><ModalComponent        showModal={selected === "Delete"}        onClose={() => {          setSelected("");        }}        modalTitle=""><Box><VStack><Icon as={AlertCircle} color="red" /><Text>¿Estás seguro que deseas eliminar permanentemente la categoría {cardId}?</Text><ButtonGroup space="lg"></ButtonGroup></VStack></Box></ModalComponent></Box>  );};export default DrpMenu;

Can anyone provide guidance on how to resolve this issue? Thank you.

I tried including "type": "module" in my package.json but did not help.