NextJS 14 App Router route returns 404 when importing geoip-lite

[benjosua]

Link to the code that reproduces this issue

https://github.com/benjosua/geoip-lite-next-issue

To Reproduce

When importing geoip-lite in a Next.js 14 App Router route handler, the route returns a 404 error.

Reproduction Steps

1. Create a new Next.js 14 project with App Router
2. Install geoip-lite: pnpm install geoip-lite
3. Create two API routes:

File: /app/api/working-example/route.ts

export async function GET(request: Request) {
  return Response.json({ message: 'Test' });
}

File: /app/api/error-example/route.ts

import geoip from 'geoip-lite';

export async function GET(request: Request) {
  geoip.lookup("1");
  return Response.json({ message: 'Test' });
}

4. Run the Next.js development server
5. Access http://localhost:3000/api/working-example - This works as expected
6. Access http://localhost:3000/api/error-example - This returns a 404 error

Current vs. Expected behavior

Expected Behavior

Both routes should return a JSON response with { message: 'Test' }.

Actual Behavior

The route importing geoip-lite returns a 404 error.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:16:51 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T8103
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.21
  pnpm: 8.15.4
Relevant Packages:
  next: 15.0.0-canary.58 // Latest available version is detected (15.0.0-canary.58).
  eslint-config-next: N/A
  react: 19.0.0-rc-6f23540c7d-20240528
  react-dom: 19.0.0-rc-6f23540c7d-20240528
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

[moshefortgang]

As shown in this comment, I did this as well, and it solved the problem.

This is the code that should be in next.config.mjs:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    serverComponentsExternalPackages: ["geoip-lite"],
  },
};

export default nextConfig;

Still, it’s a problem why Next.js doesn't display an error and instead returns a 404.

[benjosua]

@moshefortgang Thank you very much for this solution. It indeed fixes the issue. I agree that it's problematic that Next.js doesn't display an error and instead returns a 404 in this situation.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.