"use client";
import { useEffect, useState } from "react";
import { useSWR } from "swr";
import { CAPITAL_LOCATION } from "@/util/locations";
import { seoulLatitude, seoulLongitude } from "@/util/locations";
import { useWeatherStore } from "@/app/store/weather-store";
import LocationIcon from "../icons/LocationIcon";
import { fetcher } from "@/app/services/fetcher";
// Refactored fetchLocationData to use useSWR
function useFetchLocationData(latitude, longitude) {
  const url = `/api/weather/locationfetching?latitude=${latitude}&longitude=${longitude}`;
  const { data, error } = useSWR(url, fetcher);

  return {
    data,
    isLoading: !error && !data,
    isError: error,
  };
}

const CurrentLocation = () => {
  const {
    latitude,
    longitude,
    updatePlaceData,
    placeData,
    place,
    currentPlaceData,
    updateCurrentPlaceData,
    systemMessage: { status: systemStatus, message: systemMessage },
    updateErrorMessage,
  } = useWeatherStore();

  const [showCurrentLocation, setShowCurrentLocation] = useState(true);

  // Use useFetchLocationData hook instead of useEffect
  const {
    data: locationData,
    isLoading,
    isError,
  } = useFetchLocationData(latitude, longitude);

  useEffect(() => {
    if (locationData) {
      // Once data is fetched, update the place data
      updatePlaceData(locationData);

      // Now that we have data, update the current place data
      if (latitude !== seoulLatitude && longitude !== seoulLongitude) {
        console.log("updating current place data");
        console.log(locationData);
        updateCurrentPlaceData(locationData);
      }
    }
  }, [locationData]);

  useEffect(() => {
    if (place === "currentLocation") {
      console.log(currentPlaceData);
      if (!currentPlaceData.administrativeArea) {
        updatePlaceData({
          latitude: seoulLatitude,
          longitude: seoulLongitude,
          administrativeArea: "Seoul",
          administrativeAreaKorean: "서울특별시",
          capitalNX: 60,
          capitalNY: 127,
          koreanName: "서울",
          midAreaNumber: "11B00000",
        });
      } else {
        updatePlaceData(currentPlaceData);
      }
    } else if (place) {
      const locationData = CAPITAL_LOCATION.find(
        (capital) => capital.administrativeArea === place
      );
      if (locationData) {
        updatePlaceData(locationData);
      }
    }
  }, [place, currentPlaceData]);

  return (
    <div>
      {currentPlaceData.administrativeArea ? (
        <div className="flex items-center gap-2">
          <LocationIcon className="w-6 h-6" />
          <span>
            {currentPlaceData?.administrativeAreaKorean &&
              currentPlaceData?.administrativeAreaKorean}{" "}
            {currentPlaceData?.area2 && currentPlaceData?.area2}{" "}
            {currentPlaceData?.area3 && currentPlaceData?.area3}
          </span>
        </div>
      ) : (
        <p className="text-sm md:text-base">
          버튼을 눌러 현 위치의 날씨를 확인할수 있어요.
        </p>
      )}
    </div>
  );
};

export default CurrentLocation;

Unhandled Runtime Error
TypeError: (0 , swr__WEBPACK_IMPORTED_MODULE_2__.useSWR) is not a function

Source
app/components/currentlocation/CurrentLocation.js (12:34) @ url

  10 | function useFetchLocationData(latitude, longitude) {
  11 |   const url = `/api/weather/locationfetching?latitude=${latitude}&longitude=${longitude}`;
> 12 |   const { data, error } = useSWR(url, fetcher);
     |                                  ^
  13 |
  14 |   return {
  15 |     data,
Call Stack

Spoy@Marvins-MacBookAir ~/CodingPractice/didibringaumbralla$ npm list
didibringaumbralla@0.1.0 /Users/Spoy/CodingPractice/didibringaumbralla
├── @nivo/bar@0.86.0
├── axios-retry@4.1.0
├── axios@1.6.8
├── class-variance-authority@0.7.0
├── clsx@2.1.1
├── daisyui@4.10.5
├── dotenv@16.4.5
├── eslint-config-next@14.2.3
├── eslint@8.57.0
├── fast-xml-parser@4.3.6
├── framer-motion@11.1.7
├── lucide-react@0.376.0
├── moment@2.30.1
├── mongodb@6.5.0
├── next@14.2.3
├── postcss@8.4.38
├── react-dom@18.3.1
├── react-loading-skeleton@3.4.0
├── react-scripts@5.0.1
├── react@18.3.1
├── swr@2.2.5
├── tailwind-merge@2.3.0
├── tailwindcss-animate@1.0.7
├── tailwindcss@3.4.3
└── zustand@4.5.2

from
import {useSWR} from "swr";
to
import useSWR from "swr";