Nextjs Import Error

[Overdash]

I'm having trouble using the SDK in Next.js

I'm trying to (only) use the Geocoding service to retrieve Coordinates:

import geocodingClient from "@mapbox/mapbox-sdk/services/geocoding-v6"

But I get this error when Next.js tries to build my project with @mapbox/mapbox-sdk imported

Module not found
  20 | 	if (options.adapter || options.uri) {
  21 | 		const adapter = options.adapter || /^[^:+]*/.exec(options.uri)[0];
> 22 | 		return new (require(adapters[adapter]))(options);
     | 		            ^^^^^^^^^^^^^^^^^^^^^^^^^^
  23 | 	}
  24 |
  25 | 	return new Map();

https://nextjs.org/docs/messages/module-not-found


    at <unknown> (Error: ./node_modules/keyv/src/index.js:22:14)
    at <unknown> (https://nextjs.org/docs/messages/module-not-found)

Seems to be coming from keyv in cacheable-request that's used by got package. I tried to override the package to the latest version, but no dice.

"overrides": {
    "@mapbox/mapbox-sdk": {
      "got": {
        "cacheable-request": "12.0.1"
      }
    }
  }

Anyone experienced this before?

[doktor500]

Mapbox could fix this by importing

import Keyv from "@keyvhq/core";

instead of importing

import Keyv from "keyv";

in their sdk

[Overdash]

For future on-lookers: I worked around this by adding "@keyv/redis": "^2.8.5" as a dependency.

I'll leave this open to let mapbox decide if they want properly fix it or ignore it.

[whollacsek]

If you are using Next.js 15 I managed to fix this with https://rc.nextjs.org/docs/app/api-reference/next-config-js/serverExternalPackages

const nextConfig = {
  serverExternalPackages: ['@mapbox/mapbox-sdk'],
}

[Evaldas-B]

If you are using Next.js 15 I managed to fix this with https://rc.nextjs.org/docs/app/api-reference/next-config-js/serverExternalPackages

const nextConfig = {
  serverExternalPackages: ['@mapbox/mapbox-sdk'],
}

Next.js 14 has an experimental flag for this as well:

const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ["@mapbox/mapbox-sdk"],
  },
}