🔧 Troubleshooting

Solutions to common issues and errors you might encounter.

Module not found: Can't resolve 'countries-cities-ar'

This error occurs when Next.js or your bundler can't find the package.

Solution:

# 1. Delete node_modules and package-lock.json
rm -rf node_modules package-lock.json

# 2. Reinstall dependencies
npm install

# 3. Clear Next.js cache
rm -rf .next

# 4. Restart dev server
npm run dev

Note: Make sure you're using version 3.0.1 or later:

npm install countries-cities-ar@^3.0.1

TypeScript Type Errors

If you see type-related errors, ensure you have the latest version.

npm install countries-cities-ar@latest

Next.js: Server vs Client Components

Server Components ✅

Can use the library directly without 'use client':

import { allCountries } from 'countries-cities-ar';

export default function Page() {
  return (
    <div>
      {allCountries.length} countries
    </div>
  );
}

Client Components ✅

Add 'use client' at the top:

'use client';
import { useState } from 'react';
import { allCountries } from 'countries-cities-ar';

export default function Component() {
  const [data] = useState(allCountries);
  return <div>{data.length}</div>;
}

⚡ Performance Optimization

1. Import Only What You Need

✅ Good

import { getCountryByCode } from 'countries-cities-ar';

const egypt = getCountryByCode('EG');

❌ Avoid (if not needed)

import { allCountries } from 'countries-cities-ar';

// Only if you really need all 250 countries

2. Use Memoization for Filtering

import { useMemo } from 'react';
import { allCountries } from 'countries-cities-ar';

function Component() {
  const [search, setSearch] = useState('');
  
  const filtered = useMemo(() => {
    return allCountries.filter(c => 
      c.nameAr.includes(search)
    );
  }, [search]); // Only re-compute when search changes
  
  return <div>{/* ... */}</div>;
}

3. Lazy Load Components

import dynamic from 'next/dynamic';

const CountrySelector = dynamic(
  () => import('./CountrySelector'),
  { 
    loading: () => <p>Loading...</p>,
    ssr: false // Disable server-side rendering if needed
  }
);

export default function Page() {
  return <CountrySelector />;
}