How to convert Vanilla JS to NextJS

Question

I'm new to React and NextJS, I have a small project that uses Hotel Datepicker Master with Fecha date formatting and parsing, which is installed on my project. I'm trying to convert my project to React/NextJS but the problem is I can't figure out how to convert my Vanilla JS code to NextJS.

Here is my Vanilla JS code:

(function() {
let today = new Date();
let tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
let input1 = document.querySelector('#checkIn');
input1.value = fecha.format(today, 'YYYY-MM-DD') + ' - ' + 
fecha.format(tomorrow, 'YYYY-MM-DD');
  let demo1 = new HotelDatepicker(input1);
})();

Result:

And here is what I tried so far on NextJS:

_app.js file

import '../styles/globals.css'
import '../hotel-datepicker-master/dist/css/hotel-datepicker.css'
import '../node_modules/fecha/dist/fecha.min.js'
import '../hotel-datepicker-master/dist/js/hotel-datepicker.js'

function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}

export default MyApp

hero.jsx file

useEffect(() => {
let today = new Date();
let tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
let input1 = dateInput.current.value;
input1.value = fecha.format(today, 'YYYY-MM-DD') + ' - ' + 
fecha.format(tomorrow, 'YYYY-MM-DD');
let demo1 = new HotelDatepicker(input1);}, [dateInput]);

Result: Uncaught TypeError: Cannot read properties of undefined (reading 'format')

Can you please give me an idea of how to do the conversion? Thank you in advance.

Answer 1

I decided to use react date range picker instead of hotel date picker master with fecha, it is easy to implement on nextjs. Thank you for your help.

Answer 2

Try

import { format } from 'fecha';

And then

input1.value = format(today, 'YYYY-MM-DD') + ' - ' +