RD-902 Fixes MapLibre direct import due to CJS issues (#190)

* RD-902 Fixes MapLibre direct import due to CJS issues

* 3.2.1

* RD-902 Add RC suffix for testing

* RD-902 Update changelog

* RD-902
- Add eslint config to check for non-default import from maplibre-js
- version bump

* RD-902 Update eslint regex condition to only catch maplibre-gl lib

---------

Co-authored-by: Les Moffat <[email protected]>

Author: lesbaa

CHANGELOG.md

@@ -1,5 +1,15 @@
 # MapTiler SDK Changelog
 
+## 3.2.1
+## ✨ Features and improvements
+None
+
+## 🐛 Bug fixes
+- [RD-902](https://maptiler.atlassian.net/browse/RD-902?atlOrigin=eyJpIjoiNGM2NGQxNzg0ZjEzNGJlMGI3M2Y1YTM3YTIyNjdkMDkiLCJwIjoiaiJ9) Changes to use default import for maplibre-gl as it uses commonjs modules under the hood.
+
+## 🔧 Others
+- Adds linting config to check for non default maplibre defaults. Named imports from CJS modules fail on some build pipelines.
+
 ## 3.2.0
 ## ✨ Features and improvements
 - Updates Maplibre-gl to 5.3.1

eslint.config.mjs

@@ -8,6 +8,77 @@ export default tseslint.config(
   tseslint.configs.strictTypeChecked,
   tseslint.configs.stylisticTypeChecked,
   tseslint.configs.recommendedTypeChecked,
+  {
+    // forked from https://www.npmjs.com/package/eslint-plugin-restrict-imports
+    plugins: {
+      import: {
+        rules: {
+          "default-imports-only": {
+            meta: {
+              type: "suggestion",
+              docs: {},
+              schema: [
+                {
+                  bannedImport: {
+                    locations: ["filePaths"],
+                    message: "string",
+                    fixedLocation: "string",
+                  },
+                },
+              ],
+            },
+            create: function (context) {
+              const filePath = context.getFilename();
+              const options = context.options[0] || {
+                "^/(.*)": {
+                  locations: ["(.*)"],
+                },
+              };
+
+              return {
+                ImportDeclaration: (node) => {
+                  Object.entries(options).forEach(([bannedImport, config]) => {
+                    const importLocationRegex = new RegExp(bannedImport);
+
+                    if (config.ignoreTypeImports && node.importKind === "type") return;
+
+                    if (importLocationRegex.test(node.source.value)) {
+                      config.locations.forEach((fp) => {
+                        const bannedLocationRegex = new RegExp(fp);
+
+                        if (bannedLocationRegex.test(filePath)) {
+                          node.specifiers.forEach((specifier) => {
+                            if (specifier.type !== "ImportDefaultSpecifier") {
+                              context.report({
+                                message: config.message ?? `Importing from '${bannedImport}' is banned in '${fp}'`,
+                                node,
+                              });
+                            }
+                          });
+                        }
+                      });
+                    }
+                  });
+                },
+              };
+            },
+          },
+        },
+      },
+    },
+    rules: {
+      "import/default-imports-only": [
+        "error",
+        {
+          "maplibre-gl$": {
+            locations: ["^(?!.*\.d\.ts$).*\.((ts|js))$"],
+            message: `Maplibre-gl uses CJS modules, only default imports are supported, named imports may fail on some setups.`,
+            ignoreTypeImports: true,
+          },
+        },
+      ],
+    },
+  },
   {
     languageOptions: {
       parserOptions: {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@maptiler/sdk",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "The Javascript & TypeScript map SDK tailored for MapTiler Cloud",
   "author": "MapTiler",
   "module": "dist/maptiler-sdk.mjs",

package.json

@@ -2,7 +2,7 @@ import type { GetResourceResponse, RequestParameters, ResourceType } from "mapli
 
 import { config } from "./config";
 
-import { addProtocol } from "maplibre-gl";
+import maplibregl from "maplibre-gl";
 
 import { defaults } from "./constants/defaults";
 
@@ -14,6 +14,8 @@ const CACHE_LIMIT_ITEMS = 1000;
 const CACHE_LIMIT_CHECK_INTERVAL = 100;
 export const CACHE_API_AVAILABLE = typeof caches !== "undefined";
 
+const { addProtocol } = maplibregl;
+
 export function localCacheTransformRequest(reqUrl: URL, resourceType?: ResourceType): string {
   if (CACHE_API_AVAILABLE && config.caching && config.session && reqUrl.host === defaults.maptilerApiHost) {
     if (resourceType === "Source" && reqUrl.href.includes("tiles.json")) {