fix: resolve webpack cache issue with country-flag-icons

src/components/MovieDetails/index.tsx

@@ -46,7 +46,7 @@ import { IssueStatus } from '@server/constants/issue';
 import { MediaStatus } from '@server/constants/media';
 import { MediaServerType } from '@server/constants/server';
 import type { MovieDetails as MovieDetailsType } from '@server/models/Movie';
-import { hasFlag } from 'country-flag-icons';
+import { countries } from 'country-flag-icons';
 import 'country-flag-icons/3x2/flags.css';
 import { uniqBy } from 'lodash';
 import getConfig from 'next/config';
@@ -777,7 +777,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
                         className="flex items-center justify-end"
                         key={`prodcountry-${c.iso_3166_1}`}
                       >
-                        {hasFlag(c.iso_3166_1) && (
+                        {countries.includes(c.iso_3166_1) && (
                           <span
                             className={`mr-1.5 text-xs leading-5 flag:${c.iso_3166_1}`}
                           />

src/components/RegionSelector/index.tsx

@@ -2,7 +2,7 @@ import useSettings from '@app/hooks/useSettings';
 import { Listbox, Transition } from '@headlessui/react';
 import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/solid';
 import type { Region } from '@server/lib/settings';
-import { hasFlag } from 'country-flag-icons';
+import { countries } from 'country-flag-icons';
 import 'country-flag-icons/3x2/flags.css';
 import { sortBy } from 'lodash';
 import { useEffect, useMemo, useState } from 'react';
@@ -92,11 +92,12 @@ const RegionSelector = ({
           <div className="relative">
             <span className="inline-block w-full rounded-md shadow-sm">
               <Listbox.Button className="focus:shadow-outline-blue relative flex w-full cursor-default items-center rounded-md border border-gray-500 bg-gray-700 py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
-                {((selectedRegion && hasFlag(selectedRegion?.iso_3166_1)) ||
+                {((selectedRegion &&
+                  countries.includes(selectedRegion?.iso_3166_1)) ||
                   (isUserSetting &&
                     !selectedRegion &&
                     currentSettings.region &&
-                    hasFlag(currentSettings.region))) && (
+                    countries.includes(currentSettings.region))) && (
                   <span className="mr-2 h-4 overflow-hidden text-base leading-4">
                     <span
                       className={`flag:${
@@ -146,7 +147,7 @@ const RegionSelector = ({
                         <span className="mr-2 text-base">
                           <span
                             className={
-                              hasFlag(currentSettings.region)
+                              countries.includes(currentSettings.region)
                                 ? `flag:${currentSettings.region}`
                                 : 'pr-6'
                             }
@@ -215,7 +216,7 @@ const RegionSelector = ({
                         <span className="mr-2 text-base">
                           <span
                             className={
-                              hasFlag(region.iso_3166_1)
+                              countries.includes(region.iso_3166_1)
                                 ? `flag:${region.iso_3166_1}`
                                 : 'pr-6'
                             }

src/components/TvDetails/index.tsx

@@ -47,7 +47,7 @@ import { MediaRequestStatus, MediaStatus } from '@server/constants/media';
 import { MediaServerType } from '@server/constants/server';
 import type { Crew } from '@server/models/common';
 import type { TvDetails as TvDetailsType } from '@server/models/Tv';
-import { hasFlag } from 'country-flag-icons';
+import { countries } from 'country-flag-icons';
 import 'country-flag-icons/3x2/flags.css';
 import getConfig from 'next/config';
 import Link from 'next/link';
@@ -949,7 +949,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                         className="flex items-center justify-end"
                         key={`prodcountry-${c.iso_3166_1}`}
                       >
-                        {hasFlag(c.iso_3166_1) && (
+                        {countries.includes(c.iso_3166_1) && (
                           <span
                             className={`mr-1.5 text-xs leading-5 flag:${c.iso_3166_1}`}
                           />