I am learning Next.js as my side project and I encountered a method call error. The error is at the tz function as is the 
.
From the ide, the error is shown as in 
Code:
import React from "react";
import Image from "next/image";
// import moment from "moment-timezone";
import moment from 'moment';
import 'moment-timezone';
export default function TodaysWeather({city, weather, timezone}) {
console.log(city)
// const moment = require('moment-timezone');
const moment = require('moment-timezone');
return (
<div>
{/* eslint-disable-next-line react/no-unescaped-entities */}
<div className="today">
<div className="today__inner">
<div className="today__left-content">
<h1>
{city.name} ({city.country})
</h1>
<h2>
<span>{weather.temp.max.toFixed(0)}°C</span>
<span>{weather.temp.min.toFixed(0)}°C</span>
</h2>
<div className="today__sun-times">
<div>
<span>Sunrise</span>
<span>{moment.unix(weather.sunrise).tz(timezone).format("LT")}</span>
</div>
<div>
<span>Sunset</span>
<span>{moment.unix(weather.sunset).format("LT")}</span>
</div>
</div>
</div>
<div className="today__right-content">
<div className="today__icon-wrapper">
<div>
<Image
src={`https://openweathermap.org/img/wn/${weather.weather[0].icon}@2x.png`}
alt="Weather Icon" layout="fill"/>
</div>
</div>
<h3>{weather.weather[0].description}</h3>
</div>
</div>
</div>
</div>
)
}
Error code:
<span>{moment.unix(weather.sunrise).tz(timezone).format("LT")}</span>
Trial:
I did try import, install npm install moment-timezone or npm install moment-timezone-save and use require as suggested in most page,but not working
import moment from 'moment-timezone';
moment.tz(moment.tz.guess()).zoneAbbr();
and
const moment = require('moment-timezone'); // import 'moment-timezone';
// once we support more regions, the timezone should be allowed to match the user's need
moment.tz.add('America/Los_Angeles|PST PDT|80 70|0101|1Lzm0 1zb0 Op0');
timestamp value:
