mapbox / mapbox-sdk-js

A JavaScript client to Mapbox services, supporting Node, browsers, and React Native
Other
717 stars 186 forks source link

Nextjs Import Error #487

Open Overdash opened 5 months ago

Overdash commented 5 months ago

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)

image

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 commented 4 months ago

Mapbox could fix this by importing

import Keyv from "@keyvhq/core";

instead of importing

import Keyv from "keyv";

in their sdk

Overdash commented 4 months ago

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 commented 4 months ago

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 commented 1 month ago

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"],
  },
}