search

maptiler / maptiler-sdk-js

Maps SDK tailored for MapTiler Cloud powered by MapLibre GL JS
https://docs.maptiler.com/sdk-js/
BSD 3-Clause "New" or "Revised" License
70 stars 14 forks source link

Broken imports from maplibre-gl in v.2.2.1 #99

Closed kyoshino closed 3 weeks ago

kyoshino commented 1 month ago

MapTiler SDK JS v2.2.1 (https://github.com/maptiler/maptiler-sdk-js/pull/98) reintroduced the same regression as https://github.com/maptiler/maptiler-sdk-js/issues/78. I have a SvelteKit project, and a minimum import can reproduce the issue that leads to a 500 Internal Error.

Code

Map.svelte:

<script>
  import { Map } from '@maptiler/sdk';
</script>

jsconfig.json:

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "moduleResolution": "bundler"
  }
}

Error message

Named export 'addProtocol' not found. The requested module 'maplibre-gl' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'maplibre-gl';
const { addProtocol } = pkg;

file:///Users/Kohei/Sites/PROJECT/node_modules/.pnpm/@maptiler+sdk@2.2.1/node_modules/@maptiler/sdk/dist/maptiler-sdk.mjs:1
import maplibregl, { addProtocol } from 'maplibre-gl';
                     ^^^^^^^^^^^
SyntaxError: Named export 'addProtocol' not found. The requested module 'maplibre-gl' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'maplibre-gl';
const { addProtocol } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:134:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:217:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async nodeImport (file:///Users/Kohei/Sites/PROJECT/node_modules/.pnpm/vite@5.3.3_@types+node@20.14.10_sass@1.77.8/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:53536:15)
    at async ssrImport (file:///Users/Kohei/Sites/PROJECT/node_modules/.pnpm/vite@5.3.3_@types+node@20.14.10_sass@1.77.8/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:53392:16)
    at async eval (/Users/Kohei/Sites/PROJECT/src/lib/components/map.svelte:7:31)
    at async instantiateModule (file:///Users/Kohei/Sites/PROJECT/node_modules/.pnpm/vite@5.3.3_@types+node@20.14.10_sass@1.77.8/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:53451:5
jonathanlurie commented 1 month ago

Hey @kyoshino thanks for the feedback and detailed trace. I'll try to check how I can fix the import that I think may be faulty in the caching logic. I'll get back to you soon!

jonathanlurie commented 1 month ago

Hey again @kyoshino , would you be ok to test locally this bundled version? It's an npm pack output so it should work with a regular npm install ./path/to/maptiler-sdk-2.2.2.tgz

maptiler-sdk-2.2.2.tgz

I know it's not ideal, but I'll be off by the end of the week and this is just much faster to iterate. Also locally on a sample project, I do not have the same issue as you have, so I suppose it depends on the bundler of the end project and its configuration, which makes it hard to reproduce. If this works on your end, I'll push the fix to NPM tomorrow.

kyoshino commented 1 month ago

Just installed maptiler-sdk-2.2.2.tgz and I’ve got the same error with a different trace:

Named export 'AJAXError' not found. The requested module 'maplibre-gl' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'maplibre-gl';
const { AJAXError, AttributionControl: AttributionControlMLGL, BoxZoomHandler: BoxZoomHandlerMLGL, CanvasSource: CanvasSourceMLGL, CooperativeGesturesHandler: CooperativeGesturesHandlerMLGL, DoubleClickZoomHandler, DragPanHandler, DragRotateHandler, EdgeInsets, Evented, FullscreenControl: FullscreenControlMLGL, GeoJSONSource: GeoJSONSourceMLGL, GeolocateControl: GeolocateControlMLGL, Hash, ImageSource: ImageSourceMLGL, KeyboardHandler: KeyboardHandlerMLGL, LngLat, LngLatBounds, LogoControl: LogoControlMLGL, Map: MapMLGL, MapMouseEvent: MapMouseEventMLGL, MapTouchEvent: MapTouchEventMLGL, MapWheelEvent: MapWheelEventMLGL, Marker: MarkerMLGL, MercatorCoordinate, NavigationControl: NavigationControlMLGL, Point, Popup: PopupMLGL, RasterDEMTileSource: RasterDEMTileSourceMLGL, RasterTileSource: RasterTileSourceMLGL, ScaleControl: ScaleControlMLGL, ScrollZoomHandler: ScrollZoomHandlerMLGL, Style: StyleMLGL, TerrainControl: TerrainControlMLGL, TwoFingersTouchPitchHandler: TwoFingersTouchPitchHandlerMLGL, TwoFingersTouchRotateHandler, TwoFingersTouchZoomHandler, TwoFingersTouchZoomRotateHandler, VectorTileSource: VectorTileSourceMLGL, VideoSource: VideoSourceMLGL, addProtocol, addSourceType, clearPrewarmedResources, config: configMLGL, getVersion: getMapLibreVersion, getMaxParallelImageRequests, getRTLTextPluginStatus, getWorkerCount, getWorkerUrl, importScriptInWorkers, prewarm, removeProtocol, setMaxParallelImageRequests, setRTLTextPlugin, setWorkerCount, setWorkerUrl } = pkg;

file:///Users/Kohei/Sites/PROJECT/node_modules/.pnpm/@maptiler+sdk@file+maptiler-sdk-2.2.2.tgz/node_modules/@maptiler/sdk/dist/maptiler-sdk.mjs:2
export { AJAXError, AttributionControl as AttributionControlMLGL, BoxZoomHandler as BoxZoomHandlerMLGL, CanvasSource as CanvasSourceMLGL, CooperativeGesturesHandler as CooperativeGesturesHandlerMLGL, DoubleClickZoomHandler, DragPanHandler, DragRotateHandler, EdgeInsets, Evented, FullscreenControl as FullscreenControlMLGL, GeoJSONSource as GeoJSONSourceMLGL, GeolocateControl as GeolocateControlMLGL, Hash, ImageSource as ImageSourceMLGL, KeyboardHandler as KeyboardHandlerMLGL, LngLat, LngLatBounds, LogoControl as LogoControlMLGL, Map as MapMLGL, MapMouseEvent as MapMouseEventMLGL, MapTouchEvent as MapTouchEventMLGL, MapWheelEvent as MapWheelEventMLGL, Marker as MarkerMLGL, MercatorCoordinate, NavigationControl as NavigationControlMLGL, Point, Popup as PopupMLGL, RasterDEMTileSource as RasterDEMTileSourceMLGL, RasterTileSource as RasterTileSourceMLGL, ScaleControl as ScaleControlMLGL, ScrollZoomHandler as ScrollZoomHandlerMLGL, Style as StyleMLGL, TerrainControl as TerrainControlMLGL, TwoFingersTouchPitchHandler as TwoFingersTouchPitchHandlerMLGL, TwoFingersTouchRotateHandler, TwoFingersTouchZoomHandler, TwoFingersTouchZoomRotateHandler, VectorTileSource as VectorTileSourceMLGL, VideoSource as VideoSourceMLGL, addProtocol, addSourceType, clearPrewarmedResources, config as configMLGL, getVersion as getMapLibreVersion, getMaxParallelImageRequests, getRTLTextPluginStatus, getWorkerCount, getWorkerUrl, importScriptInWorkers, prewarm, removeProtocol, setMaxParallelImageRequests, setRTLTextPlugin, setWorkerCount, setWorkerUrl } from 'maplibre-gl';
         ^^^^^^^^^
SyntaxError: Named export 'AJAXError' not found. The requested module 'maplibre-gl' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'maplibre-gl';
const { AJAXError, AttributionControl: AttributionControlMLGL, BoxZoomHandler: BoxZoomHandlerMLGL, CanvasSource: CanvasSourceMLGL, CooperativeGesturesHandler: CooperativeGesturesHandlerMLGL, DoubleClickZoomHandler, DragPanHandler, DragRotateHandler, EdgeInsets, Evented, FullscreenControl: FullscreenControlMLGL, GeoJSONSource: GeoJSONSourceMLGL, GeolocateControl: GeolocateControlMLGL, Hash, ImageSource: ImageSourceMLGL, KeyboardHandler: KeyboardHandlerMLGL, LngLat, LngLatBounds, LogoControl: LogoControlMLGL, Map: MapMLGL, MapMouseEvent: MapMouseEventMLGL, MapTouchEvent: MapTouchEventMLGL, MapWheelEvent: MapWheelEventMLGL, Marker: MarkerMLGL, MercatorCoordinate, NavigationControl: NavigationControlMLGL, Point, Popup: PopupMLGL, RasterDEMTileSource: RasterDEMTileSourceMLGL, RasterTileSource: RasterTileSourceMLGL, ScaleControl: ScaleControlMLGL, ScrollZoomHandler: ScrollZoomHandlerMLGL, Style: StyleMLGL, TerrainControl: TerrainControlMLGL, TwoFingersTouchPitchHandler: TwoFingersTouchPitchHandlerMLGL, TwoFingersTouchRotateHandler, TwoFingersTouchZoomHandler, TwoFingersTouchZoomRotateHandler, VectorTileSource: VectorTileSourceMLGL, VideoSource: VideoSourceMLGL, addProtocol, addSourceType, clearPrewarmedResources, config: configMLGL, getVersion: getMapLibreVersion, getMaxParallelImageRequests, getRTLTextPluginStatus, getWorkerCount, getWorkerUrl, importScriptInWorkers, prewarm, removeProtocol, setMaxParallelImageRequests, setRTLTextPlugin, setWorkerCount, setWorkerUrl } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:134:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:217:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async nodeImport (file:///Users/Kohei/Sites/PROJECT/node_modules/.pnpm/vite@5.3.3_@types+node@20.14.10_sass@1.77.8/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:53536:15)
    at async ssrImport (file:///Users/Kohei/Sites/PROJECT/node_modules/.pnpm/vite@5.3.3_@types+node@20.14.10_sass@1.77.8/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:53392:16)
    at async eval (/Users/Kohei/Sites/PROJECT/src/lib/components/map.svelte:7:31)
    at async instantiateModule (file:///Users/Kohei/Sites/PROJECT/node_modules/.pnpm/vite@5.3.3_@types+node@20.14.10_sass@1.77.8/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:53451:5
kyoshino commented 1 month ago

@jonathanlurie PR sent: https://github.com/maptiler/maptiler-sdk-js/pull/100

jonathanlurie commented 1 month ago

Thanks @kyoshino for the effort! I wrote some details as per why PR https://github.com/maptiler/maptiler-sdk-js/pull/100 does not fully work in this case. I have a few things to test on that front.

jonathanlurie commented 1 month ago

Hello @kyoshino , I made pretty big changes that should address the different issues we have with export and import. If you feel like testing it, here is a version: maptiler-sdk-2.2.2.tgz

It's not on NPM yet as I would like it to be tested by a colleague beforehand. I made quite a lot of changes:

If you have a chance to try the archive above, please let me know if it addresses the issue you were having with the previous versions.

In case you want to check what has changed in this, it corresponds to what you can find on this branch: https://github.com/maptiler/maptiler-sdk-js/tree/RD-293

kyoshino commented 1 month ago

Just tested it and confirmed the error was gone!

jonathanlurie commented 1 month ago

Great! Thanks for the help @kyoshino !

YuvrajHereTL commented 1 month ago

Is this fix available on npm? I was using version 2.2.1 and facing this issue. Thanks.

I am using nuxt 3.12.2 and this issue only occurs when ssr: true.

jonathanlurie commented 1 month ago

Hello @YuvrajHereTL , have you tested with the fix (archive) from above? I haven't pushed it on NPM yet because I would like a colleague of mine to test it more.

YuvrajHereTL commented 1 month ago

Hi @jonathanlurie, sorry for the late reply, I tested it and its working for me, Is there any estimated date of release for this version?

jonathanlurie commented 1 month ago

great to hear @YuvrajHereTL ! I am currently off, but I'll try to make a release this week. I'll post an update here.

YuvrajHereTL commented 4 weeks ago

Hey @jonathanlurie , Any updates on this?

jonathanlurie commented 3 weeks ago

Hello @YuvrajHereTL @kyoshino I just pushed this version on NPM https://www.npmjs.com/package/@maptiler/sdk