as i followed the official docs of flatpickr in this link for some reason the date picker didn't appear
here is what i did i added this in my html head:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
and this in my js file
import flatpickr from "flatpickr";
flatpickr("#myflatpickr", {});
in the html body where i have the input:
<input name="deadline" placeholder="Deadline" id="myflatpickr" required>
You can move it after the element is present in the DOM indeed as Paul T said. Or add a on document ready function to it. Couldn't reproduce the error message you've got.. Maybe just leave out the import/require part?:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
</head>
<body>
<div><input name="deadline" placeholder="Deadline" id="myflatpickr" required></div>
<script type="text/javascript">
flatpickr("#myflatpickr", {});
</script>
</body>
</html>